用Html5与Asp.net MVC上传多个文件的实现代码

代码如下:

<br><form action="/Home/Upload" enctype="multipart/form-data" id="form2" method="post"> <br><input type="file" name="fileToUpload" id="fileToUpload2" multiple="multiple" /> <br><input type="submit" value="submit" /> <br></form> <br> <br>那在Asp.net MVC web application中，我们可以这么实现： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "form2" })) <br>{ <br><label for="file">Upload Image:</label> <br><input type="file" name="fileToUpload" id="fileToUpload2" multiple="multiple" /> <br><input type="submit" value="Upload Image by submit" /> <br>} <br> <br>假设这是一个HomeController下View, 即将提交到Upload的Action,看下面服务端的代码: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>[HttpPost] <br>public ActionResult Upload(HttpPostedFileBase[] fileToUpload) <br>{ <br>foreach (HttpPostedFileBase file in fileToUpload) <br>{ <br>string path = System.IO.Path.Combine(Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName)); <br>file.SaveAs(path); <br>} <br><br>ViewBag.Message = "File(s) uploaded successfully"; <br>return RedirectToAction("Index"); <br>} <br> <br>好的，就这么简单。 这里我们把接收到文件存储到App_Data文件夹中，然后返回Index的Action. 看下面图片，我们能够从文件选择器选择多张图片： <br><img style="BACKGROUND-IMAGE: none; BORDER-RIGHT-WIDTH: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px" title="mutliImagesfiles" border="0" alt="mutliImagesfiles" src="https://img.gxlcms.com//Uploads-s/new/2019-09-19-201919/20120830115513289.png" width="566" height="419"> <br><br>关于HTML5这个特性在那些浏览器支持，您可以去这里查看。 您还可以查看W3C官方的文档。我们在FireFox 14.01下测试能过。 <p></p></li><li><p>希望对您Web开发有帮助。 </p></li><li>            </li><li>                                </li></ol></pre></li></ol></pre>