移动端HTML5实现文件上传功能【附代码】
更新时间:2023-04-06 13:28:16 阅读： 评论：0
pc端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目阅兵2017里面需要做图片上传的功能，既然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$lf=$(this); vardoms={ “filetoupload”:$lf.find(“.filetoupload”), “thumb”:$lf.find(“.thumb”), “progress”:$lf.find(“.upload-progress”) }; varfuns={ //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件 “filelected”: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’; elfilesize=(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,fal);//监听上传进度 xhr.addeventlistener(“load”,funs.uploadcomplete,fal); xhr.addeventlistener(“error”,opts.uploadfailed,fal); xhr.open(“post”,opts.url); xhr.nd(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.respontext) } }; doms.filetoupload.on(“change”,function(){ doms.progress.find(“span”).width(“0”); funs.filelected(); }); }); } }); })(zepto);
调用方法四季的划分：
javascript code 复制内容到剪贴板
$(“.camera-area”).fileupload({ “url”:“savetofile.php”, “file”:“myfile”});
php部分：
php code 复制内容到剪贴板
<?php if(ist($_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.“\r\n”; file_put_contents(‘log.log’,$log,file_append); } ?>
以上这篇移动端html5实现文件上传功能【附代码】就是www.887551.com分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持www.887551.com。
原文地址：
本文word下载地址：移动端HTML5实现文件上传功能【附代码】.doc
本文 PDF 下载地址：移动端HTML5实现文件上传功能【附代码】.pdf
