MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小
浏览数：34 /
时间：2015年06月09日
本篇体验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="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="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
<script src="~/Scripts/jquery.fileupload.js"></script>
<script src="~/Scripts/jquery.fileupload-ui.js"></script>
<script src="~/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="#" id="simpleupload">开始简单上传</a>
</div>
<h5>检查文件类型和尺寸</h5>
<div>
<input type="file" name="myFile" id="check" /> <br/>
<a href="#" id="checkupload">开始检查并上传</a>
</div>
@section scripts
{
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
<script src="~/Scripts/jquery.fileupload.js"></script>
<script src="~/Scripts/jquery.fileupload-ui.js"></script>
<script src="~/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 = 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 = 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格式，出现报错： 
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
