How to show progress File Upload in Ajax using jQuery

In this tutorial we will discuss progress file upload in ajax

How to show progress File Upload in Ajax using jQuery
In this tutorial we will see, How to file, upload Progress Bar helps us to display the file upload status bar during file upload. You can show the upload progress bar in Ajax and show the percentage (%) using jQuery. The progress bar is very helpful to make the file upload process cool.

The given jquery code, how to show the file upload progress bar in Ajax and make a progress bar with percentage (%) in jQuery.

Create variable xhr option in $.Ajax () functions to control the progress bar functioning.
Generate a new XMLHttpRequest object using JavaScript window.XMLHttpRequest() method.
The progress event of XMLHttpRequest upload property grant to get the complete and loaded length.
Calculate the percentage and manage 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
    }
});

Also Read: How to Upload Multiple Images without Page reload using jQuery Ajax and PHP