In this article I will explain with an example, how to upload multiple files with Progress Bar using jQuery Uploadify plugin in ASP.Net MVC Razor.
The jQuery Uploadify plugin is a Flash based jQuery Plugin which allows uploading multiple files with Progress Bar using AJAX in ASP.Net MVC Razor.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
View
The following View consists of an HTML FileUpload element to which the jQuery Uploadify plugin will be applied.
The files required by the jQuery Uploadify plugin are placed inside a folder named Uploadify within the project.
All the necessary Script and CSS files needed for the jQuery Uploadify plugin are inherited in the HEAD section and the jQuery Uploadify plugin is applied to the HTML FileUpload element.
The script property of the jQuery Uploadify plugin is set to the Index Method of the Home Controller.
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <link rel="Stylesheet" type="text/css" href="../Uploadify/uploadify.css"/>
    <script type="text/javascript" src="../Uploadify/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../Uploadify/jquery.uploadify.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#postedFile").fileUpload({
                'uploader': '../Uploadify/uploader.swf',
                'cancelImg': '../Uploadify/cancel.png',
                'buttonText': 'Browse Files',
                'script': '/Home/Index/',
                'folder': 'Uploads',
                'fileDesc': 'Image Files',
                'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
                'multi': true,
                'auto': true
            });
        });
    </script>
</head>
<body>
    <div>
        <input type="file" id="postedFile" name="postedFile"/>
    </div>
</body>
</html>
 
 
Namespaces
You will need to import the following namespace.
using System.IO;
 
 
Controller
The Action method Index by default supports the GET operation and hence another overridden method for POST operation is created which accepts the parameter which is a collection of type HttpPostedFileBase.
Note: The name of the HttpPostedFileBase parameter must always be FileData as this variable name is used by jQuery Uploadify plugin.
 
A loop is executed over the HttpPostedFileBase collection and one by one each file is saved to the Directory (Folder).
public class HomeController : Controller
{
    // GET: Home
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(List<HttpPostedFileBase> FileData)
    {
        string path = Server.MapPath("~/Uploads/");
        foreach (HttpPostedFileBase postedFile in FileData)
        {
            if (postedFile != null)
            {
                string fileName = Path.GetFileName(postedFile.FileName);
                postedFile.SaveAs(path + fileName);
            }
        }
 
        return View();
    }
}
 
 
Screenshot
Upload multiple files with Progress Bar using jQuery Uploadify Plugin in ASP.Net MVC
 
 
Downloads
Download Code