Xtykutl

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

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

}

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

}

See Also

• Single File Upload to Multiple File Upload in MVC


• Uploading a File (Or Files) With ASP.NET MVC

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

HTML Side

@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>   

}

Controller

[HttpPost]

public ActionResult MyUpload(IEnumerable<HttpPostedFileBase> myFiles)

{

    foreach (var file in myFiles)

    {

        if (file != null && file.ContentLength > 0)

        {

            //handle files;

        }

    }

    return View();

}