How to Upload Multiple files using jQuery AJAX in ASP.NET MVC

Uploading multiple files in a single request is a common requirement in modern web applications—whether you’re building a photo gallery, a document management system, or a form that needs to accept several attachments at once. While ASP.NET MVC provides solid built-in support for file uploads, combining it with AJAX lets you upload files asynchronously without refreshing the page, giving users a smoother, more responsive experience.

In this tutorial, we’ll walk through the complete process of setting up multiple file uploads using jQuery AJAX in an ASP.NET MVC application—from creating the view and handling the FormData object on the client side, to processing the uploaded files in the controller. By the end, you’ll have a fully working example you can adapt to your own projects.

You will take just 3 minutes to read and understand this jQuery file Upload tutorial that uses AJAX and does not perform page reloading when saving the files on the server.

Moreover it is able to upload multiple files at the same time.

First create the 3 controls on your View

<input type="file" id="fileInput" multiple />
<input type="button" id="fileButton" value="Upload Files" /><br />
<img src="~/Content/Image/loading.gif" id="loadingImg" />

The fileInput element serves as the file upload control, sending files to the server when the fileButton is clicked. Additionally, the img tag displays a loading indicator while the file upload is in progress.

Add the following CSS code.

<style>
#loadingImg {
    display: none;
}
</style>

The jQuery AJAX to upload the Files

I will use the jQuery AJAX Method to upload the files. So add the below jQuery code to your View.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#fileButton").click(function () {
            var files = $("#fileInput").get(0).files;
            var fileData = new FormData();
 
            for (var i = 0; i < files.length; i++) {
                fileData.append("fileInput", files[i]);
            }
 
            $.ajax({
                type: "POST",
                url: "/AjaxFileUpload/UploadFiles",
                dataType: "json",
                contentType: false, // Not to set any content header
                processData: false, // Not to process data
                data: fileData,
                success: function (result, status, xhr) {
                    alert(result);
                },
                error: function (xhr, status, error) {
                    alert(status);
                }
            });
        });
 
        $(document).ajaxStart(function () {
            $("#loadingImg").show();
            $("#fileButton").prop('disabled', true);
        });
 
        $(document).ajaxStop(function () {
            $("#loadingImg").hide();
            $("#fileButton").prop('disabled', false);
            $("#fileInput").val("");
        });
 
    });
</script>

Explanation : On the button click event, I begin by adding all the selected files to a FormData object, which is then posted to the controller’s UploadFiles action using the jQuery AJAX method.

Controller Action that Saves the Files to the Server

The UploadFiles action, which is invoked from the jQuery AJAX method, should be added to your controller. Inside this action, I loop through the files and save each one to a folder.

[HttpPost]
public ActionResult UploadFiles()
{
    string path = Server.MapPath("~/Content/Upload/");
    HttpFileCollectionBase files = Request.Files;
    for (int i = 0; i < files.Count; i++)
    {
        HttpPostedFileBase file = files[i];
        file.SaveAs(path + file.FileName);
    }   
    return Json(files.Count + " Files Uploaded!");
}

Check the below link:

DOWNLOAD

That’s all there is to it! As you can see, uploading multiple files using jQuery AJAX in ASP.NET MVC is a straightforward process once you understand how the FormData object and the controller action work together. This code is simple enough to customize based on your specific requirements—whether you need to add file type validation, size restrictions, or progress indicators. Feel free to use this code freely in your own projects, and don’t hesitate to tweak it as needed to fit your application’s workflow.