mvc file控件无刷新异步上传操作源码
前言
上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件。今天遇到一个问题:input控件file无法进行异步无刷新上传。真真的感到别扭。所以就尝试这去处理了一下。主要分三个部分:上传类的封装,htmlinput控件file处理和后台controller的调用。
上传封装类:
此类主要两个功能,一些简单的筛选和文件重命名操作。
文件的筛选包括:
文件类型,文件大小
重命名:
其中默认为不进行重命名操作,其中重命名默认为时间字符串DateTime.Now.ToString("yyyyMMddHHmmss")
文件地址:
可进行自定义。相对地址与绝对地址都可以。
usingSystem; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Text; usingSystem.Threading.Tasks; usingSystem.IO; usingSystem.Web; namespaceCommonHelper { publicclassUploadFile:System.Web.UI.Page { publicUploadFile() { } //错误信息 publicstringmsg{get;set;} publicstringFullName{get;set;} //文件名称 publicstringFileName{get;set;} ///<summary> ///文件上传 ///bywyl20161019 ///</summary> ///<paramname="filepath">文件上传地址</param> ///<paramname="size">文件规定大小</param> ///<paramname="filetype">文件类型</param> ///<paramname="files">file上传的文件</param> ///<paramname="isrename">是否重名名</param> ///<returns></returns> publicboolupload_file(stringfilepath,intsize,string[]filetype,boolisrename=false) { filepath=Server.MapPath(filepath); //文件夹不存在就创建 if(!Directory.Exists(filepath)) Directory.CreateDirectory(filepath); if(HttpContext.Current.Request.Files.Count==0) { msg="文件上传失败"; returnfalse; } msg="上传成功"; varfile=HttpContext.Current.Request.Files[0]; if(file.ContentLength==0) { msg="文件大小为0"; returnfalse; } if(file.ContentLength>size*1024) { msg="文件超出指定大小"; returnfalse; } varfilex=HttpContext.Current.Request.Files[0]; stringfileExt=Path.GetExtension(filex.FileName).ToLower(); if(filetype.Count(a=>a==fileExt)<1) { msg="文件类型不支持"; returnfalse; } if(isrename) FileName=DateTime.Now.ToString("yyyyMMddHHmmss")+fileExt; FileName=filex.FileName; FullName=Path.Combine(filepath,FileName); file.SaveAs(FullName); returntrue; } } }
上传文件的方法在这也没有什么过得的介绍。看代码注释应该都好理解。
页面html
<divclass="content"> <formmethod="post"target="hidden_frame"enctype="multipart/form-data"action="/CustomFrom/FormDesign/FileUpload"name="form"> <inputclass="minput"name="fileName"type="file"> <inputclass="btnfile-input"value="提交..."name="F2"type="submit"> <iframeid="hidden_frame"name="F2"style="display:none"> <html> <head></head> <body></body> </html> </iframe> </form> </div>
注:因为mvc上传文件input控件file不支持异步无刷新上传,故此用调用跳转到iframe的方式进行上传无刷新操作。
以上页面就是上传控件的html定义。有几点要注意的
1.enctype="multipart/form-data"必须加上,表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,才能完整的传递文件数据,进行下面的操作.enctype="multipart/form-data"是上传二进制数据;form里面的input的值以2进制的方式传过去。
2.form的name要加上
3.提交按钮是submit,当然你如果想写js设置成button也成。这个没什么好说的。
4.iframe中style="display:none"
以上就是整个的布局和提交上传文件到后台,并且跳转到ifrom中,接下来就是接受调用上面上传文件的方法。然后在iframe页面提示上传结果,然后把iframe关闭即可。
后台代码:
[HttpPost] publicActionResultFileUpload() { //从配置文件中获取支持上传文件格式 string[]fileType=ConfigurationManager.AppSettings["fileType"].Split('|'); //上传文件路径 stringstrPath=ConfigurationManager.AppSettings["strPath"]; UploadFilefile=newUploadFile(); boolflag=file.upload_file(strPath,25000,fileType); returnContent("<script>window.alert('"+file.msg+"');window.top.close()</script>"); }
注:
1.文件路径,文件保存路径放在了配置文件中,当然你也可以把文件大小,是否重命名都放到配置文件中。
2.返回到view的脚本先弹出提示框;在关闭窗口
3.根据你自己的需要去调用UploadFile的msg(错误提示),FullName(全名称),FileName文件名称进行操作
4.window.top.close()关闭当前iframe的窗口,针对于兼容性请大家自行处理,我测试的没有问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。