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();
}
