移动端HTML5实现文件上传功能【附代码】

2020-03-24 16:24:10

字体：大中小

来源：转载

供稿：网友

PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。用的技术主要是：ajax
FileReader
FormDataHTML结构：JavaScript Code复制内容到剪贴板
$.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={ //选择文件，获取文件大小，也可以在这里获取html' target='_blank'>文件格式，限制用户上传非要求格式的文件 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);
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实现文件上传功能【附代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/hutuzhu/p/5254532.htmlhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html align属性是什么含义？html中的align属性设置方法介绍

下一篇：HTML标题在HTML文档中为何重要