How to create multiple fileUpload using MVC 4?

How to create multiple fileUpload using MVC 4?, someone asked me to explain?

In this article we will learn how to upload in MVC 4 application.To begin create an mvc project called mvc-tutorials and also create a class and name it as picture with a single propery name files with datatype IEnumerable<HttpPostedFileBase>.

For more about preview ref., HTML5 preview image using jQuery example

Step 1: Create a class and give a name picture.Copy and paste the following code.

public class picture {
    public IEnumerable<HttpPostedFileBase>files { get; set; }

Step 2: Right click on the "Controllers" folder and add "fileUpload" controller. Copy and paste the following code.

using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_tutorials.Controllers
    public class fileUploadController : Controller
        // GET: /fileUpload/
        public ActionResult Index()
            return View();
        public ActionResult Index(picturepicture)
            foreach(var file in picture.files) {
                if (file.ContentLength > 0)
                   var fileName = Path.GetFileName(file.FileName);
                   var filePath = Path.Combine(Server.MapPath("~/Images"), fileName);
           TempData["Message"] = "files uploaded successfully";
            return RedirectToAction("Index");

Step 3: Right click on the "Index" action method in the "fileUploaderController" and add "Index" view. Copy and paste the following code.

    Layout = null;
<!DOCTYPE html>
    <meta name="viewport" content="width=device-width" />
    <title>single fileupload in MVC</title>
    <style type="text/css">
        .btn {
            width: 100px;
            height: 50px;
            background: #00BCD4;
            border-style: solid;
            border-color: white;
            color: white;
<body style="border: 1px solid #DED8D8; width: 400px; font-family: Arial; margin-left: 50px">
   @using (@Html.BeginForm(null, null, FormMethod.Post,
     new { enctype = "multipart/form-data" }))
        if (TempData["Message"] != null)
<p style="font-family: Arial; font-size: 16px; font-weight: 200; color: red">@TempData["Message"]</p>
                <td style="padding-bottom: 35px" colspan="2">
                   <h2 style="color: #FF5722">single file upload in</h2>
                <td style="width: 100px;">
                   <b style="color: #FF5722">File:</b>
                   <input type="file" name="files" id="files" multiple="multiple" />
                <td colspan="2" style="padding-top: 30px">
                   <input type="submit" class="btn" name="submit" />


create multiple fileUpload using MVC 4

Post your comments / questions