用Html5與Asp.net MVC上傳多個文件

     Html 5 的有一些File API，對Form表單增強的特性，讓我們輕松支持多文件上傳，看下面的Html片斷代碼:

<form action="/Home/Upload" enctype="multipart/form-data" id="form2" method="post">
          <input type="file" name="fileToUpload" id="fileToUpload2"  multiple="multiple"  />
         <input type="submit" value="submit" />
</form>

    那在Asp.net MVC web application中，我們可以這么實現：

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "form2" }))
{
        <label for="file">Upload Image:</label>
        <input type="file" name="fileToUpload" id="fileToUpload2"  multiple="multiple"  />
        <input type="submit" value="Upload Image by submit" />
}

假設這是一個HomeController下View, 即將提交到Upload的Action,看下面服務端的代碼:

        [HttpPost]
        public ActionResult Upload(HttpPostedFileBase[] fileToUpload)
        {
            foreach (HttpPostedFileBase file in fileToUpload)
            {
                string path = System.IO.Path.Combine(Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName));
                file.SaveAs(path);
            }

            ViewBag.Message = "File(s) uploaded successfully";
            return RedirectToAction("Index");
        }

好的，就這么簡單。 這里我們把接收到文件存儲到App_Data文件夾中，然后返回Index的Action. 看下面圖片，我們能夠從文件選擇器選擇多張圖片：


關於HTML5這個特性在那些瀏覽器支持，您可以去這里查看。 您還可以查看W3C官方的文檔。我們在FireFox 14.01下測試能過。

希望對您Web開發有幫助。

您可能感興趣的文章：

Html 5中自定義data-*特性

作者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
該文章也同時發布在我的獨立博客中-Petter Liu Blog。