MVC中异步上传文件01-使用jquery客户端验证类型和大小
浏览数：29 /
时间：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格式，出现报错：
□ 参考资料
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
