Introduction

With jQuery, asynchronous file upload is usually done with the browser's FormData API and $.ajax. The browser sends a normal multipart request in the background, so the page does not need to reload.

The Basic Pattern

The essential steps are:

1. get the selected file from an input[type=file]
2. append it to a FormData object
3. send the FormData with $.ajax
4. disable jQuery's default request-body processing

A minimal working example looks like this.

1<form id="uploadForm">
2  <input type="file" id="fileInput" name="file" />
3  <button type="button" id="uploadButton">Upload</button>
4</form>
5<div id="status"></div>

1$(function () {
2  $("#uploadButton").on("click", function () {
3    const file = $("#fileInput")[0].files[0];
4
5    if (!file) {
6      $("#status").text("Please choose a file first.");
7      return;
8    }
9
10    const formData = new FormData();
11    formData.append("file", file);
12
13    $.ajax({
14      url: "/upload",
15      method: "POST",
16      data: formData,
17      processData: false,
18      contentType: false,
19      success: function () {
20        $("#status").text("Upload complete.");
21      },
22      error: function () {
23        $("#status").text("Upload failed.");
24      }
25    });
26  });
27});

The important options are processData: false and contentType: false. Without them, jQuery will try to serialize the request incorrectly instead of sending the multipart body generated by FormData.

Why FormData Is the Right Tool

FormData lets the browser build the same kind of payload a normal HTML form would send, including binary files. That means you do not need to manually encode the file contents.

It also makes multiple-file uploads straightforward.

1const files = $("#fileInput")[0].files;
2const formData = new FormData();
3
4for (let i = 0; i < files.length; i += 1) {
5  formData.append("files", files[i]);
6}

The server side then needs to expect repeated parts under the same field name.

Showing Upload Progress

If you want a progress bar, provide a custom xhr function and listen to the upload progress event.

1$.ajax({
2  url: "/upload",
3  method: "POST",
4  data: formData,
5  processData: false,
6  contentType: false,
7  xhr: function () {
8    const xhr = $.ajaxSettings.xhr();
9    xhr.upload.addEventListener("progress", function (event) {
10      if (event.lengthComputable) {
11        const percent = Math.round((event.loaded / event.total) * 100);
12        $("#status").text(`Uploading: ${percent}%`);
13      }
14    });
15    return xhr;
16  }
17});

This is still the same asynchronous upload. You are just observing the browser's progress signal while the request is in flight.

Server-Side Still Matters

jQuery only sends the request. The server must still accept multipart uploads and store the file safely.

Typical server-side responsibilities are:

• validating file size
• validating type or extension
• choosing a safe storage path
• returning a useful JSON response

If the server rejects multipart data or expects a different field name, the jQuery side may look correct while the upload still fails.

When Not to Use jQuery for This

If you are working in a modern codebase without jQuery, the native fetch API plus FormData is usually cleaner. But if the project already uses jQuery heavily, $.ajax remains a perfectly workable solution for asynchronous uploads.

The core mechanism is the same either way: a multipart request sent in the background.

Common Pitfalls

The most common mistake is forgetting processData: false or contentType: false, which breaks FormData uploads.

Another mistake is reading the file input incorrectly and sending undefined because no file was actually selected.

A third pitfall is debugging only the jQuery code when the real problem is on the server, such as the wrong field name or missing multipart handling.

Summary

• Use FormData plus $.ajax for asynchronous file uploads in jQuery.
• Set processData: false and contentType: false so jQuery does not corrupt the multipart request.
• Use the browser upload progress event if you want a progress indicator.
• Handle validation and storage on the server, not only in the browser.
• In modern projects, fetch is often cleaner, but the underlying upload approach is the same.