PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。

用的技术主要是：

ajax

FileReader

FormData

HTML结构：

JavaScript Code复制内容到剪贴板 <divclass="camera-area"> <formenctype="multipart/form-data"method="post"> <inputtype="file"name="fileToUpload"class="fileToUpload"accept="image/*"capture="camera"/> <divclass="upload-progress"><span></span></div> </form> <divclass="thumb"></div> </div>

已经封装好的upload.js，依赖zepto

JavaScript Code复制内容到剪贴板 (function($){ $.extend($.fn,{ fileUpload:function(opts){ this.each(function(){ var$self=$(this); vardoms={ "fileToUpload":$self.find(".fileToUpload"), "thumb":$self.find(".thumb"), "progress":$self.find(".upload-progress") }; varfuns={ //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件 "fileSelected":function(){ varfiles=(doms.fileToUpload)[0].files; varcount=files.length; for(varindex=0;index<count;index++){ varfile=files[index]; varfileSize=0; if(file.size>1024*1024) fileSize=(Math.round(file.size*100/(1024*1024))/100).toString()+'MB'; else fileSize=(Math.round(file.size*100/1024)/100).toString()+'KB'; } funs.uploadFile(); }, //异步上传文件 uploadFile:function(){ varfd=newFormData();//创建表单数据对象 varfiles=(doms.fileToUpload)[0].files; varcount=files.length; for(varindex=0;index<count;index++){ varfile=files[index]; fd.append(opts.file,file);//将文件添加到表单数据中 funs.previewImage(file);//上传前预览图片，也可以通过其他方法预览txt } varxhr=newXMLHttpRequest(); xhr.upload.addEventListener("progress",funs.uploadProgress,false);//监听上传进度 xhr.addEventListener("load",funs.uploadComplete,false); xhr.addEventListener("error",opts.uploadFailed,false); xhr.open("POST",opts.url); xhr.send(fd); }, //文件预览 previewImage:function(file){ vargallery=doms.thumb; varimg=document.createElement("img"); img.file=file; doms.thumb.html(img); //使用FileReader方法显示图片内容 varreader=newFileReader(); reader.onload=(function(aImg){ returnfunction(e){ aImg.src=e.target.result; }; })(img); reader.readAsDataURL(file); }, uploadProgress:function(evt){ if(evt.lengthComputable){ varpercentComplete=Math.round(evt.loaded*100/evt.total); doms.progress.html(percentComplete.toString()+'%'); } }, "uploadComplete":function(evt){ alert(evt.target.responseText) } }; doms.fileToUpload.on("change",function(){ doms.progress.find("span").width("0"); funs.fileSelected(); }); }); } }); })(Zepto);

调用方法：

JavaScript Code复制内容到剪贴板 $(".camera-area").fileUpload({ "url":"savetofile.php", "file":"myFile" });

PHP部分：

PHP Code复制内容到剪贴板 <?php if(isset($_FILES['myFile'])){ //Example: writeLog($_FILES); move_uploaded_file($_FILES['myFile']['tmp_name'],"uploads/".$_FILES['myFile']['name']); echo'successful'; } functionwriteLog($log){ if(is_array($log)||is_object($log)){ $log=json_encode($log); } $log=$log."rn"; file_put_contents('log.log',$log,FILE_APPEND); } ?>

点击这里下载源码

以上这篇移动端HTML5实现文件上传功能【附代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。

原文地址：http://www.cnblogs.com/hutuzhu/p/5254532.html