html5手机端图片上传插件代码示例-mile米乐体育

小编给大家分享一下html5手机端图片上传插件代码示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

基于zepto，支持多文件上传，进度和图片预览，用于手机端。

(function($){ $.extend($,{ fileupload:function(options){ varpara={ multiple:true, filebutton:".filepicker", uploadbutton:null, url:"/home/muploadimg", filebase:"mfile",//mvc后台需要对应的名称 auto:true, previewzoom:null, uploadcomplete:function(res){ console.log("uploadcomplete",res); }, uploaderror:function(err){ console.log("uploaderror",err); }, onprogress:function(percent){//提供给外部获取单个文件的上传进度，供外部实现上传进度效果 console.log(percent); }, }; para=$.extend(para,options);  var$self=$(para.filebutton); //先加入一个file元素 varmultiple="";//设置多选的参数 para.multiple?multiple="multiple":multiple=""; $self.css('position','relative'); $self.append('');  vardoms={ "filetoupload":$self.parent().find("#fileimage"), //"thumb":$self.find(".thumb"), //"progress":$self.find(".upload-progress") }; varcore={ fileselected:function(){ varfiles=(doms.filetoupload)[0].files; varcount=files.length; console.log("共有" count "个文件"); for(vari=0;i
简单讲解：上传还是得靠file元素，所以一开始就加了个隐藏的,简单隐藏会有一些问题，有时候不能触发file change事件。所以用了透明度,将父类设置为相对位置。然后通过file的change事件获得需要上传的文件并放入formdata中，再使用xmlhttprequest发请求。进度条是直接绑定的process事件。文件预览是filereader，另外需要注意的就是filebase参数，对应的是mvc后台上传方法的参数的名称，如果不一致，后台将获取不到file。回调函数就不说了。
[httppost] publicactionresultmuploadimg(httppostedfilebasemfile) { returnuploadimg(mfile,"mobile"); }
[httppost] publicactionresultuploadimg(httppostedfilebasefile,stringdir="userimg") { if(checkimg(file,imgtypes)!="ok")returnjson(new{success=false,message="文件格式不对！"},jsonrequestbehavior.allowget);  if(file!=null) { varpath="~/content/uploadfiles/" dir "/"; varuploadpath=server.mappath(path); if(!directory.exists(uploadpath)) { directory.createdirectory(uploadpath); } stringfilename=path.getfilename(file.filename);//原始文件名称 stringfileextension=path.getextension(filename);//文件扩展名 //stringsavename=guid.newguid() fileextension;//保存文件名称这是个好方法。 stringsavename=encrypt.generateordernumber() fileextension;//保存文件名称这是个好方法。 file.saveas(uploadpath savename);  returnjson(new{success=true,savename=path savename}); } returnjson(new{success=false,message="请选择要上传的文件！"},jsonrequestbehavior.allowget);  }
调用：
 
uploadimg
 点击选择文件   
扩展到$对象而不扩展到$.fn，是因为zepto中绑定事件的时候后者不方便，传递id或样式名容易绑定。手机端可以自动的调出相机和相册。默认是不预览的图片的,需要制定预览区域，进度条需要自己写样式，只返回了进度值。
同时传2张的效果：
以上是“html5手机端图片上传插件代码示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！
        
                
展开全文