How to Get File Upload Progress in Ajax using jQuery

Progress Bar helps to display the file upload status in real-time. You can get the upload progress in Ajax and show the percentage progress bar using jQuery. The progress bar is very useful to make the file upload process user-friendly.

The following code snippet shows how to get the file upload progress in Ajax and make a progress bar with percentage using jQuery.

• Use xhr option in $.ajax() method to handle the progress bar operation.
• Create a new XMLHttpRequest object using JavaScript window.XMLHttpRequest() method.
• The progress event of XMLHttpRequest upload property allows to get the total and loaded length.
• Calculate the percentage and handle the process bar.

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = (evt.loaded / evt.total) * 100;
                // Place upload progress bar visibility code here
            }
        }, false);
        return xhr;
    },
    type: 'POST',
    url: "upload.php",
    data: {},
    success: function(data){
        // Do something on success
    }
});