is there a good example of how to upload multiple image files in asp.net mvc? I know we can use HttpPostedFileBase to upload one file. Is there a way to upload multiple files by clicking one button?
I used file upload in ajaxtoolbox in webform before and like how it works. Is there a similar way in MVC? or, is there a existing control that can do this well? free control is better, but it is ok even it costs some $.
Thanks
You could implement an action with POST http verb to that receive a collection of HttpPostedFileBase and save all files, for sample:
[HttpPost] public ActionResult Upload(IEnumerable<HttpPostedFileBase> files) { foreach (var file in files) { file.SaveAs(Server.MapPath("~/Update/" + file.FileName)); } return View(); } Alternatively, you could read Request.Files and do the same job,
[HttpPost] public ActionResult Upload() { foreach (var file in Request.Files) { file.SaveAs(Server.MapPath("~/Update/" + file.FileName)); } return View(); } Use this jQuery plugin
just include plugin js files, create tag:
<input type='file' multiple id='fileUpload' name="files[]" data-url="@Url.Action("Upload","Home")" /> (Except IE9 it is not allowing select multiple files in select dialog)
Add some JavaScript:
$(function () { $('#fileUpload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo(document.body); }); } }); }); In controller action just check Request.Files and do whatever you want. Here is a good documentation
[HttpPost] public JsonResult Upload() { foreach (var file in Request.Files) { if(file.ContentLength > 0) { file.SaveAs(Server.MapPath("~/Upload/" + file.FileName)); } } return Json(new { result = true }); } 
I'm using this one. https://www.fyneworks.com/jquery/multiple-file-upload/
<input type="file" name="file" class="multiple" /> [HttpPost] public ActionResult Upload() { if (Request.Files.Count > 0) { foreach(var file in Request.Files) { } } return View(); } Some of the basic bits required for file uploads
Notice keyword: multiple in input element AND multipart in form element
@using (Html.BeginForm("MyUpload", "MyController", FormMethod.Post, new { enctype = "multipart/form-data" })) { <input type="file" name="myFiles" multiple /> <button class="btn btn-default">Upload</button> } [HttpPost] public ActionResult MyUpload(IEnumerable<HttpPostedFileBase> myFiles) { foreach (var file in myFiles) { if (file != null && file.ContentLength > 0) { //handle files; } } return View(); } 