Uploading multiple files with ASP.NET MVC

来源:互联网 时间:1970-01-01

I have looked at uploading individual files and downloading multiple files in MVC, and I've had a few requests recently asking me to complete the series by showing how to upload multiple files in an ASP.NET MVC application.

When designing the form for uploading, you can choose from a number of approaches. You can use plain HTML elements. If you know that your users are using browsers that implement the HTML5 file API, you can provide a single file input with the multipleattribute:

<input type="file" name="files" multiple />

This enables multiple file selection, but is not available in Internet Explorer 9 or below. It is available in most other modern browsers. One alternative is to provide a number of inputs for users of IE9 or lower. You can selectively choose to display the single input with the multiple attribute set or multiple individual inputs based on the features supported by the browser. Here's the HTML part, including the form declaration which requires the method to be set to POSTand an enctypeset to multipart/form-datafor file uploading to work:

@using (Html.BeginForm("Multiple", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) { <div id="multiple"><input type="file" class="multiple" name="files" multiple /></div><div id="single"><input type="file" class="single" name="files" /><br /><input type="file" class="single" name="files" /><br /><input type="file" class="single" name="files" /><br /></div><button class="btn btn-default">Upload</button> }

And here's the jquery code that switches between the two options:

@section Scripts{<script type="text/javascript">$(function () {if(window.FileReader != null){$('#single').hide();$('.single').prop('disabled', true);} else {$('#multiple').hide();$('.multiple').prop('disabled', true);}});</script>}

Browsers that implement the HTML5 file API include a component called Filereader. If this is null, the browser doesn't provide the required support and the input with the multipleattribute is disabled and hidden.

Files are uploaded to the server in the Request.Filescollection, each one of which is mapped to an HttpPostedFileBaseobject by the default MVC model binder. Therefore, the controller action that is tasked to process the uploaded files needs a parameter that represents a collection of HttpPostedFileBaseobjects. This can be a property on a model, or a simple List<HttpPosteFileBase>parameter. The following action takes each file and saves it with a new name generated from a Guidto a folder called "uploads":

[HttpPost]public ActionResult Multiple(IEnumerable<HttpPostedFileBase> files){foreach (var file in files){if (file != null && file.ContentLength > 0){file.SaveAs(Path.Combine(Server.MapPath("/uploads"), Guid.NewGuid() + Path.GetExtension(file.FileName)));}}return View();}

An HttpPostedFileBasecollection is created and sized to the number of uploads on a form regardless whether the user populated it, or the number of files uploaded if the multiple attribute approach is used. So when testing to see if a file has been uploaded, you should check to see if it is null before testing to see if the ContentLengthis greater than 0. If you prefer to save the files in a database, either as binary data or pointers to files in the file system you can read how to do that from my previous article on file uploading: ASP.NET MVC 5 with EF 6 - Working With Files.


This brief article shows how to upload multiple files in an ASP.NET MVC application by using only HTML solutions (no Flash). It describes the multipleattribute available as part of HTML5 and shows how to fallback to an alternative solution in the cases where the browser lacks the required support.