Multiple File Upload Using MVC jQuery AJAX Post

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.

<h3>Upload File(s)</h3>
<style>
.red {
color: red;
}
</style>
<form id="uploader">
<div class="row">
<div class="col-sm-6">
User Name : <input type="text" id="txtuploader" />
<br /> <br />
<input id="fileInput" type="file" multiple>
<br /> <br />
<table class="table" id="FilesList" style="visibility:hidden">
<tr>
<th>
Attachment(s)
</th>
<th>
Action
</th>
</tr>
</table>
<input type="button" id="btnupload" value="Upload" style="float:right" />
</div>
</div>
</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.

<script>
var formdata = new FormData(); //FormData object
$(document).ready(function () {
$("#fileInput").on("change", function () {
var fileInput = document.getElementById('fileInput');
//Iterating through each files selected in fileInput
for (i = 0; i < fileInput.files.length; i++) {
var sfilename = fileInput.files[i].name;
let srandomid = Math.random().toString(36).substring(7);
formdata.append(sfilename, fileInput.files[i]);
var markup = "<tr id='" + srandomid + "'><td>" + sfilename + "</td><td><a href='#' onclick='DeleteFile(\"" + srandomid + "\",\"" + sfilename +
"\")'><span class='glyphicon glyphicon-remove red'></span></a></td></tr>"; // Binding the file name
$("#FilesList tbody").append(markup);
}
chkatchtbl();
$('#fileInput').val('');
});
$("#btnupload").click(function () {
formdata.append('uploadername', $('#txtuploader').val());
$.ajax({
url: '/Home/UploadFiles',
type: "POST",
contentType: false, // Not to set any content header
processData: false, // Not to process data
data: formdata,
async: false,
success: function (result) {
if (result != "") {
alert(result);
}
},
error: function (err) {
alert(err.statusText);
}
});
});
});
function DeleteFile(Fileid, FileName) {
formdata.delete(FileName)
$("#" + Fileid).remove();
chkatchtbl();
}
function chkatchtbl() {
if ($('#FilesList tr').length > 1) {
$("#FilesList").css("visibility", "visible");
} else {
$("#FilesList").css("visibility", "hidden");
}
}
</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.

public ActionResult UploadFiles()
{
string uname = Request["uploadername"];
HttpFileCollectionBase files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFileBase file = files[i];
string fname;
// Checking for Internet Explorer
if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
{
string[] testfiles = file.FileName.Split(new char[] { '\\' });
fname = testfiles[testfiles.Length - 1];
}
else
{
fname = file.FileName;
}
// Get the complete folder path and store the file inside it.
fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);
file.SaveAs(fname);
}
return Json("Hi, " + uname + ". Your files uploaded successfully", JsonRequestBehavior.AllowGet);
}
}