Software/Scripts How to Get File Upload Progress in Ajax using jQuery

[emailx45]

How to Get File Upload Progress in Ajax using jQuery

Spoiler: Content

[SHOWTOGROUPS=4,20]
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
}
});

[/SHOWTOGROUPS]

 

[FLT]

"Hey guys, I've been there too. I solved it by using the XMLHttpRequest object and setting up an 'onprogress' event handler in the callback function. Here's some sample code: `xhr.onprogress = function(evt) {...}`"

 

[Felachitario Lores]

"Hey, I had a similar issue a while back. You should try using the jQuery File Upload plugin, it's super easy to implement and it does what you need - provides progress bars for file uploads. Works like a charm, trust me."

 

[ljudok]

"Dude, I gotcha back. You can achieve this by using the jqXHR object in jQuery's $.ajax method and checking the progress event. I had similar issues in the past, and this worked like a charm for me."

 

[GoldKeeper]

"Hey guys, I've used the jQuery Form plugin for this, it provides a nice way to show upload progress in a neat little bar. It doesn't use Ajax directly, but you can integrate it with Ajax pretty easily. Has anyone else found any other good solutions for this?"