首先说appcan内部实现了file标签,我们就不用纠结这个问题了,还提供了上传百分比哦,然后下面的方法按从上到下依次看,很简单。 <div class="head_btn btn upload fl" id="upload">上传</div><!--样式自己定哦,保留id就可以了--> <script> window.uexOnload = function(){ /*图片上传事件 一定要放在uexOnload里面start*/ uexWindow.cbActionSheet = actionSheetSuccess; uexImageBrowser.cbPick = ready_upload; uexCamera.cbOpen = ready_upload; uexWidgetOne.cbError = uexWidgetOneErrorCb; uexUploaderMgr.onStatus = UploaderMgronStatus; uexUploaderMgr.cbCreateUploader = UploaderMgrCreateUploaderCb; /*end*/ document.getElementById("upload").addEventListener("touchstart", showActionSheet, false);//也可以用点击事件,但这个反应快。 } var uploadHttp = root_url;//服务器的上传处理地址//htttp://192.168.1.93/main.php var file_src='';//本地文件地址 function showActionSheet(){//弹出上传选择框 var value = "拍照上传;本地上传"; var mycars=value.split(";"); uexWindow.actionSheet("","取消",mycars); } function actionSheetSuccess(opId, dataType, data)//判断上传选择 { if(data == 0)//相机 { uexCamera.open(); } else if(data == 1)//本地浏览 { uexImageBrowser.pick(); } } function ready_upload(opCode, dataType, data)//获取已选择照片 { file_src=data; show_loading('已上传0%','20%'); uexUploaderMgr.createUploader('1',uploadHttp);//创建上传对象 } function UploaderMgrCreateUploaderCb(opCode,dataType,data){//上传对象创建结果 if(data == 0){//创建成功 uexUploaderMgr.uploadFile(opCode,file_src,"file_data",'1');//开始上传,//file_data就是通常页面的input type=‘file’标签的nme;服务器接收这个name就够了,如$_FILES['file_data'];appcan内部实现了这个标签 }else{ uexWindow.closeToast(); uexWindow.toast('0','5',"上传失败",2000); } } function UploaderMgronStatus(opCode,fileSize,percent,server_msg,status){//当前上传状态,server_msg是服务器打印的信息 switch (status) { case 0://正在上传 if(fileSize>2560000){ uexUploaderMgr.closeUploader(1); show_loading(parseInt(fileSize/1000)+'KB的图片太大了,只能上传2兆以下的图片哦','40%'); setTimeout('hide_loading()',3000); return false; } else{ //jq('#loading_text').text('已上传'+percent+'%'); show_loading('已上传'+percent+'%','20%'); } break; case 1://上传完毕 if(server_msg.length>1){ alert('上传成功'); } else{ switch(server_msg){ case '1':alert('图片格式不对,允许上传的格式是 .jpg .png .gif哦');break; case '2':alert('图片的真实格式不对');break; case '3':alert('图片太大了,只能上传2兆以下的图片哦');break; default:alert('未知错误!'); break; } } uexUploaderMgr.closeUploader(1); hide_loading(); break; case 2: alert("上传失败"); uexUploaderMgr.closeUploader(1); hide_loadding(); break; } } function uexWidgetOneErrorCb(opCode, errorCode, errorInfo){ } </script> php,asp页面很简单 ,接收‘file_data’这个文件信息就可以了,如$_FILES['file_data'];就是普通的上传处理,这里就不写了。 然后 show_loading 和hide_loading是我用jquery写的读取条,这里就不好拿出来献丑了,大家可以自己写个好看的。 |
|