Multiple File Upload Using MVC jQuery AJAX Post

In this blog, I am going to show how to upload multiple files using MVC jQuery Ajax Post in an application.

Step 1

Create a View with a file control to upload the file and a table to display the list of uploaded files. In this View, we have one textbox for username and a button to complete the upload process. 

  1. <h3>Upload File(s)</h3>  
  2. <style>  
  3.     .red {  
  4.         color: red;  
  5.     }  
  6. </style>  
  7. <form id="uploader">  
  8.     <div class="row">  
  9.         <div class="col-sm-6">  
  10.             User Name : <input type="text" id="txtuploader" />  
  11.             <br />            <br />  
  12.             <input id="fileInput" type="file" multiple>  
  13.             <br />            <br />  
  14.   
  15.             <table class="table" id="FilesList" style="visibility:hidden">  
  16.                 <tr>  
  17.                     <th>  
  18.                         Attachment(s)  
  19.                     </th>  
  20.                     <th>  
  21.                         Action  
  22.                     </th>  
  23.                 </tr>  
  24.             </table>  
  25.             <input type="button" id="btnupload" value="Upload" style="float:right" />  
  26.   
  27.         </div>  
  28.     </div>  
  29. </form>  

Step 2

The jQuery functions will perform the following functionalities:

  • Move uploaded files into a list on file change event.
  • chkatchtbl() helps to change the visibility of the files in the list based on the availability of the files.
  • DeleteFile() will remove selected files in the list on the click of "Remove" button
  • On click of the Upload button, it will call the controller using jQuery AJAX POST method.
  1. <script>  
  2.         var formdata = new FormData(); //FormData object  
  3.         $(document).ready(function () {  
  4.   
  5.             $("#fileInput").on("change"function () {  
  6.                 var fileInput = document.getElementById('fileInput');  
  7.                 //Iterating through each files selected in fileInput  
  8.                 for (i = 0; i < fileInput.files.length; i++) {  
  9.   
  10.                     var sfilename = fileInput.files[i].name;  
  11.                     let srandomid = Math.random().toString(36).substring(7);  
  12.   
  13.                     formdata.append(sfilename, fileInput.files[i]);  
  14.   
  15.                     var markup = "<tr id='" + srandomid + "'><td>" + sfilename + "</td><td><a href='#' onclick='DeleteFile(\"" + srandomid + "\",\"" + sfilename +  
  16.                         "\")'><span class='glyphicon glyphicon-remove red'></span></a></td></tr>"// Binding the file name  
  17.                     $("#FilesList tbody").append(markup);  
  18.   
  19.                 }  
  20.                 chkatchtbl();  
  21.                 $('#fileInput').val('');  
  22.             });  
  23.   
  24.             $("#btnupload").click(function () {  
  25.                 formdata.append('uploadername', $('#txtuploader').val());  
  26.                 $.ajax({  
  27.                     url: '/Home/UploadFiles',  
  28.                     type: "POST",  
  29.                     contentType: false// Not to set any content header  
  30.                     processData: false// Not to process data  
  31.                     data: formdata,  
  32.                     async: false,  
  33.                     success: function (result) {  
  34.                         if (result != "") {  
  35.                             alert(result);  
  36.                         }  
  37.                     },  
  38.                     error: function (err) {  
  39.                         alert(err.statusText);  
  40.                     }  
  41.                 });  
  42.             });  
  43.         });  
  44.         function DeleteFile(Fileid, FileName) {  
  45.             formdata.delete(FileName)  
  46.             $("#" + Fileid).remove();  
  47.             chkatchtbl();  
  48.         }  
  49.         function chkatchtbl() {  
  50.             if ($('#FilesList tr').length > 1) {  
  51.                 $("#FilesList").css("visibility""visible");  
  52.             } else {  
  53.                 $("#FilesList").css("visibility""hidden");  
  54.             }  
  55.         }  
  56.     </script>  

Step 3

Finally, in the Controller, it gets the all the uploaded files. When we enter the username, it stores the uploaded files into a temporary location.

  1. public ActionResult UploadFiles()  
  2. {  
  3.     string uname = Request["uploadername"];  
  4.     HttpFileCollectionBase files = Request.Files;  
  5.     for (int i = 0; i < files.Count; i++)  
  6.     {  
  7.         HttpPostedFileBase file = files[i];  
  8.         string fname;  
  9.         // Checking for Internet Explorer      
  10.         if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")  
  11.         {
  12.             string[] testfiles = file.FileName.Split(new char[] { '\\' });  
  13.             fname = testfiles[testfiles.Length - 1];  
  14.         }  
  15.         else  
  16.         {
  17.             fname = file.FileName;  
  18.         }  
  19.         // Get the complete folder path and store the file inside it.      
  20.         fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);  
  21.         file.SaveAs(fname);  
  22.         }  
  23.         return Json("Hi, " + uname + ". Your files uploaded successfully", JsonRequestBehavior.AllowGet);
  24.     }
  25. }