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="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格式，出现报错：