Html5手机端图片上传插件代码示例

小编给大家分享一下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手机端图片上传插件代码示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！