首页 > 代码库 > MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小
MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件，从表单上传过渡到jquery异步上传。
MVC最基本的上传文件是通过form表单提交方式
□ 前台视图部分
<% using(Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new {enctype = "multipart/form-data"}) {)%> <input name ="uploadFile" type="file" /> <input type="submit" value=http://www.mamicode.com/"Upload File" /><%}%>
□ 控制器部分
[HttpMethod.Post]
public ActionResult FileUpload(HttpPostedFileBase uploadFile){ if(uploadFile.ContenctLength > 0) { //获得保存路径 string filePath = Path.Combine(HttpContext.Server.MapPath("../Uploads"), Path.GetFileName(uploadFile.FileName));
uploadFile.SaveAs(filePath);
}
return View();}
但整个页面会刷新，面对比较单一、简单的需求的时候，有其价值。但在实际项目中，当然是希望通过异步方式来实现。
使用jQuery文件上传插件实现异步上传
□ 思路
1、使用jQuery文件上传插件的fileupload()方法，为type="file"的input设置url,dataType等，并把数据交给一个全局变量var jqXHRData。
2、点击上传按钮，提交数据 jqXHRData.submit()
3、控制器方法负责把文件上传到指定文件夹
□ 需要引用的js文件
<script src=http://www.mamicode.com/"~/Scripts/jquery-1.9.1.min.js"></script> <script src=http://www.mamicode.com/"~/Scripts/jquery-ui-1.9.2.min.js"></script> <script src=http://www.mamicode.com/"~/Scripts/jquery.fileupload.js"></script> <script src=http://www.mamicode.com/"~/Scripts/jquery.fileupload-ui.js"></script> <script src=http://www.mamicode.com/"~/Scripts/jquery.iframe-transport.js"></script>□ View Model
属性类型为HttpPostedFileBase。
using System.Web;namespace MvcApplication1.Models{ public class MyModel { public HttpPostedFileBase MyFile { get; set; }}
}
□ HomeController
using System.Web.Mvc;namespace MvcApplication1.Controllers{ public class HomeController : Controller { public ActionResult Index() { return View();}
}
}
□ Home/Index.cshtml
@model MvcApplication1.Models.MyModel
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}
<h5>简单上传</h5>
<div>
@Html.TextBoxFor(m => m.MyFile, new {id="simple",type="file"} ) <br/> <a href=http://www.mamicode.com/"#" id="simpleupload">开始简单上传</a></div>
<h5>检查文件类型和尺寸</h5>
<div>
<input type="file" name="myFile" id="check" /> <br/> <a href=http://www.mamicode.com/"#" id="checkupload">开始检查并上传</a></div>
@section scripts
{ <script src=http://www.mamicode.com/"~/Scripts/jquery-1.9.1.min.js"></script> <script src=http://www.mamicode.com/"~/Scripts/jquery-ui-1.9.2.min.js"></script> <script src=http://www.mamicode.com/"~/Scripts/jquery.fileupload.js"></script> <script src=http://www.mamicode.com/"~/Scripts/jquery.fileupload-ui.js"></script> <script src=http://www.mamicode.com/"~/Scripts/jquery.iframe-transport.js"></script> <script type="text/javascript">var jqXHRData;
$(function() {initSimpleFileUpload();
initFileUploadWithCheck();
//简单上传 $(‘#simpleupload‘).on(‘click‘, function() { if (jqXHRData) {jqXHRData.submit();
}
return false;});
//检查图片文件类型和大小 $(‘#checkupload‘).on(‘click‘, function() { if (jqXHRData) { var isStartUpload = true;var uploadFile = jqXHRData.files[0];
if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) { alert(‘允许图片格式gif|jpg|jpeg|tiff|png‘); isStartUpload = false; } else if (uploadFile.size > 4000000) { // 4mb alert(‘图片尺寸不能大于4 MB‘); isStartUpload = false;}
if (isStartUpload) {jqXHRData.submit();
}
}
return false;});
});
//简单上传 function initSimpleFileUpload() { $(‘#simple‘).fileupload({ url: ‘@Url.Action("UploadFile","File")‘, dataType: ‘json‘, add: function(e, data) {jqXHRData = http://www.mamicode.com/data;
},
done: function(event, data) { if (data.result.isUploaded) {alert(data.result.message);
} else {alert(data.result.message);
}
},
fail: function(event, data) { if (data.files[0].error) {alert(data.files[0].error);
}
}
});
}
//检查图片文件类型和大小 function initFileUploadWithCheck() { $(‘#check‘).fileupload({ url: ‘@Url.Action("UploadFile","File")‘, dataType: ‘json‘, add: function (e, data) {jqXHRData = http://www.mamicode.com/data;
},
done: function (event, data) { if (data.result.isUploaded) {alert(data.result.message);
} else {alert(data.result.message);
}
},
fail: function (event, data) { if (data.files[0].error) {alert(data.files[0].error);
}
}
});
}
</script>
}
相应界面： 
□ FileController
using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;namespace MvcApplication1.Controllers{ public class FileController : Controller { public ActionResult Index() { return View();}
[HttpPost]
public ActionResult UploadFile() { HttpPostedFileBase myFile = Request.Files["MyFile"]; bool isUploaded = false; string message = "上传失败"; if (myFile != null && myFile.ContentLength != 0) { string pathForSaving = Server.MapPath("~/Uploads"); if (this.CreateFolderIfNeeded(pathForSaving)) { try {myFile.SaveAs(Path.Combine(pathForSaving, myFile.FileName));
isUploaded = true; message = "上传成功";}
catch (Exception ex) { message = string.Format("上传文件失败：{0}", ex.Message);}
}
}
return Json(new { isUploaded = isUploaded, message = message });}
/// <summary> /// 检查是否要创建上传文件夹 /// </summary> /// <param name="path">路径</param> /// <returns></returns> private bool CreateFolderIfNeeded(string path) { bool result = true; if (!Directory.Exists(path)) { try {Directory.CreateDirectory(path);
}
catch (Exception) { //TODO：处理异常 result = false;}
}
return result;}
}
}
□ 另外，配置文件中需要设置允许的最大文件尺寸
<system.web>
<!--10240 Kb = 10 MB-->
<httpRuntime targetFramework="4.5" maxRequestLength= "10240" />...
</system.web>
□ 结果
上传成功后，多了Uploads文件夹： 
上传PDF格式，出现报错： 
MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。