脚本宝典收集整理的这篇文章主要介绍了mvc file控件无刷新异步上传操作源码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
前言
上传文件应该是很常见必不可少的一个操作，网上也有很多提供的上传控件。今天遇到一个问题：input控件file无法进行异步无刷新上传。真真的感到别扭。所以就尝试这去处理了一下。主要分三个部分：上传类的封装，htML input控件file处理和后台controller的调用。
上传封装类：
此类主要两个功能，一些简单的筛选和文件重命名操作。
文件的筛选包括：
文件类型，文件大小
重命名：
其中默认为不进行重命名操作，其中重命名默认为时间字符串DateTime.Now.ToString("yyyyMMddHHmmss")
文件地址：
可进行自定义。相对地址与绝对地址都可以。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; using System.Web; namespace CommonHelPEr { public class UploaDFile : System.Web.UI.Page { public UploadFile() { } //错误信息 public string msg { get; set; } public string FullName { get; set; } //文件名称 public string FileName { get; set; } /// <summary> /// 文件上传 /// by wyl 20161019 /// </summary> /// <param name="filepath">文件上传地址</param> /// <param name="size">文件规定大小</param> /// <param name="filetype">文件类型</param> /// <param name="files">file上传的文件</param> /// <param name="isrename">是否重名名</param> /// <returns></returns> public bool upload_file(string filepath, int size, string[] filetype, bool isrename = false) { filepath = Server.MapPath(filepath); //文件夹不存在就创建 if (!Directory.Exists(filepath)) Directory.CreateDirectory(filepath); if (HttpContext.current.Request.Files.Count == 0) { msg = "文件上传失败"; return false; } msg = "上传成功"; VAR file = HttpContext.Current.Request.Files[0]; if (file.ContentLength == 0) { msg = "文件大小为0"; return false; } if (file.ContentLength > size * 1024) { msg = "文件超出指定大小"; return false; } var filex = HttpContext.Current.Request.Files[0]; string fileExt = Path.GetExtension(filex.FileName).ToLower(); if (filetype.Count(a => a == fileExt) < 1) { msg = "文件类型不支持"; return false; } if (isrename) FileName = DateTime.Now.ToString("yyyyMMddHHmmss") + fileExt; FileName = filex.FileName; FullName = Path.COMbine(filepath, FileName); file.SaveAs(FullName); return true; } } }
上传文件的方法在这也没有什么过得的介绍。看代码注释应该都好理解。
页面html
<div class="content"> <form method="post" target="hidden_frame" enctype="multipart/form-data" action="/CustomFrom/FormDesign/FileUpload" name="form"> <input class="m input" name="fileName" type="file"> <input class="BTn file-input" value="提交..." name="f2" type="submIT"> <iframe id="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]
public ActionResult FileUpload()
{
//从配置文件中获取支持上传文件格式
string[] fileType = configurationManager.AppSettings["fileType"].Split('|');
//上传文件路径
string strPath = ConfigurationManager.AppSettings["strPath"];
UploadFile file= new UploadFile();
bool flag = file.upload_file(strPath, 25000, fileType);
return Content("<script>window.alert('" + file.msg + "');window.top.close()</script>");
}
注：
1.文件路径，文件保存路径放在了配置文件中，当然你也可以把文件大小，是否重命名都放到配置文件中。
2.返回到view的脚本先弹出提示框；在关闭窗口
3.根据你自己的需要去调用UploadFile的msg（错误提示），FullName （全名称）， FileName文件名称进行操作
4.window.top.close()关闭当前iframe的窗口，针对于兼容性请大家自行处理，我测试的没有问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的mvc file控件无刷新异步上传操作源码全部内容，希望文章能够帮你解决mvc file控件无刷新异步上传操作源码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。