用Html5與Asp.net MVC上傳多個文件的實現(xiàn)代碼
更新時間:2012年08月30日 11:57:35 作者:
Html 5 的有一些File API,對Form表單增強的特性,讓我們輕松支持多文件上傳,看下面的Html片斷代碼
復(fù)制代碼 代碼如下:
<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中,我們可以這么實現(xiàn):
復(fù)制代碼 代碼如下:
@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" />
}
假設(shè)這是一個HomeController下View, 即將提交到Upload的Action,看下面服務(wù)端的代碼:
復(fù)制代碼 代碼如下:
[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. 看下面圖片,我們能夠從文件選擇器選擇多張圖片:

關(guān)于HTML5這個特性在那些瀏覽器支持,您可以去這里查看。 您還可以查看W3C官方的文檔。我們在FireFox 14.01下測試能過。
希望對您Web開發(fā)有幫助。
您可能感興趣的文章:
相關(guān)文章
.NET醫(yī)院公眾號系統(tǒng)線程CPU雙高問題分析
這篇文章主要介紹了.NET醫(yī)院公眾號系統(tǒng) 線程CPU雙高分析,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-04-04Visual Studio(VS2017)配置C/C++ PostgreSQL9.6.3開發(fā)環(huán)境
這篇文章主要為大家詳細介紹了Visual Studio(VS2017)配置C/C++,PostgreSQL9.6.3開發(fā)環(huán)境,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07ASP.NET MVC5 實現(xiàn)分頁查詢的示例代碼
本篇文章主要介紹了ASP.NET MVC5 實現(xiàn)分頁查詢的示例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-02-02