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

emailx45

Moderator
Регистрация
5 Май 2008
Сообщения
3,577
Реакции
2,435
Credits
283
How to Get File Upload Progress in Ajax using jQuery
[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]
 

Kiaro

Местный
Регистрация
31 Июл 2020
Сообщения
646
Реакции
69
Credits
2,416
Что-то не особо понял, где это должно отображаться... И что в PHP должно быть?
 

emailx45

Moderator
Регистрация
5 Май 2008
Сообщения
3,577
Реакции
2,435
Credits
283
i dont know about php/jQuery languages