Upload Progress
Show upload progress with the XMLHttpRequest upload progress event, accessed via jQuery's XHR factory.
jQuery
Advanced
4 min read
Progress Notifications
Example
function uploadWithProgress(file) {
const $bar = $("#upload-bar");
return $.ajax({
url: "/api/upload", method: "POST",
data: (() => { const fd = new FormData(); fd.append("file", file); return fd; })(),
processData: false, contentType: false,
xhr: function() {
const xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener("progress", e => {
if (e.lengthComputable) $bar.css("width", (e.loaded/e.total*100) + "%").attr("aria-valuenow", e.loaded/e.total*100);
});
return xhr;
}
});
} Pro Tip
The xhr option returns a custom XHR object — attach progress listeners before send.