Upload multiple files in mvc razor using Jquery

Introduction: In this article today I am going to explain how to upload multiple files in mvc razor using jquery

Description:

In the previous article I have explained Freeze the Gridview header using Jquery in asp.net,  Display multiplerecords per row with Datalist control in asp.net (C#, VB) and  Take automaticsnapshot (screenshot) and email it using asp.net (C#, VB).

To upload multiple files I use the JQuery MultipleFile Upload Plugin.To implement the functionality in project follow the below given steps:

Step 1: Download the JQuery MultipleFile Upload Plugin and keep it in Js/Script folder of project.

Step 2: Add a class to Model. In this example I add a class Fileupload.cs to Model.

using System.ComponentModel.DataAnnotations;

public class Fileupload

    {

        [Key]

        public int ID { get; set; }

        public string FileName { get; set; }

        public string FilePath { get; set; }

    }

Step 3: Add the Fileupload class to Project DBcontext:

public DbSet<Fileupload> fileuploads { get; set; }

Step 4: Add a controller to project. I add an empty controller to project FileuploadController. Write the below given code in FileuploadController.cs file:

using fileupload.Models;

using System.IO;

public class FileuploadController : Controller

    {

        Projectcontext db = new Projectcontext();

        //

        // GET: /Fileupload/

        public ActionResult Index()

        {

            return View(db.fileuploads.ToList());

        }

        [HttpPost]

        public ActionResult Index(IEnumerable<HttpPostedFileBase> files, Fileupload upload)

        {

            foreach (var file in files)

            {

                if (file.ContentLength > 0)

                {

                    var fileName = Path.GetFileName(file.FileName);

                    var guid = Guid.NewGuid().ToString();

                    var path = Path.Combine(Server.MapPath("~/uploads"), guid + fileName);

                    file.SaveAs(path);

                    string fl = path.Substring(path.LastIndexOf("\\"));

                    string[] split = fl.Split('\\');

                    string newpath = split[1];

                    string imagepath = "~/uploads/" + newpath;

                    upload.FileName = fileName;

                    upload.FilePath = imagepath ;

                    db.fileuploads.Add(upload);

                    db.SaveChanges();                  

                }

            }          

            return RedirectToAction("Index");

        }

    }

Step 5: Add a view for FileuploadController.  Add the Jquery reference to view.

@model IEnumerable<fileupload.Models.Fileupload>

@{

    ViewBag.Title = "Upload File and Display";

    WebGrid grid = new WebGrid(Model, rowsPerPage:5);

}

<h2>Index</h2>

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

 <script src="js/jquery.MultiFile.js" type="text/javascript"></script>

@using (Html.BeginForm("", "", FormMethod.Post, new { enctype = "multipart/form-data" }))

{

    <table><tr><td><label for="file">Upload File:</label></td><td><input type="file" name="files" id="file" Class="multi"/></td></tr>

        <tr><td></td><td>  <input type="submit" /></td></tr>

    </table>

  }

@grid.GetHtml(

  tableStyle: "table",

    fillEmptyRows: true,    

    headerStyle: "header",  

    footerStyle: "grid-footer",

    mode: WebGridPagerModes.All,

    firstText: "<< First",

    previousText: "< Prev",

    nextText: "Next >",

    lastText: "Last >>",

   

    columns: new[]  // colums in grid

    {

        grid.Column("FileName"), //the model fields to display

       grid.Column("FilePath",format: @<text><img src="@Url.Content(item.FilePath)" alt="Image" height="100px" width="100px" /></text>)   

   }

)

Build the project and run.

Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.