Как получить прогресс загрузки или скачивания с помощью jQuery AJAX

Несмотря на то, что некоторые браузеры отображают прогресс в правом нижнем углу экрана, вы можете получить эти значения и использовать их в своем проекте, чтобы показать вашему пользователю процесс загрузки или выгрузки с вашим собственным пользовательским интерфейсом.

Чтобы получить информацию о ходе загрузки или выгрузки (запроса) с помощью ajax, нам нужно манипулировать глобальным объектом xhr (XMLHttpRequest) в документе.

Если мы не используем jQuery (vanillaJS), алгоритм действительно прост и понятен:

function updateProgress(evt){
if (evt.lengthComputable){
var percentComplete = (evt.loaded / evt.total)*100;
console.log(percentComplete+"% completed");
}
}
var request = new XMLHttpRequest();
request.onprogress=updateProgress;

onprogress событие вызовет updateProgress функция запроса (загружать и загружать события)

Но если мы используем jQuery, нам нужно использовать параметр xhr, который можно установить в конструкции ajax:

$.ajax({
xhr: function(){
var xhr = new window.XMLHttpRequest();
// Handle progress
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
//Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
complete:function(){
console.log("Request finished.");
}
});

ProgressEvent.lengthComputable Свойство только для чтения — это логический флаг, указывающий, имеет ли ресурс длину, которую можно вычислить. Если нет, то ProgressEvent.total свойство не имеет значительного значения, и мы не можем получить информацию о ходе процесса, в обоих случаях процесс будет легко восстановлен.

Старая версия jQuery

Если вы используете JQuery <= 1.5, you may want to use the following code instead as the xhr property is not supported on these versions.

$.ajax({
type: 'POST',
url: "/",
data: {},
beforeSend: function(XMLHttpRequest){
//Upload progress
XMLHttpRequest.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
}
}, false);
//Download progress
XMLHttpRequest.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
}
}, false);
},
success: function(data){
//Do something success-ish
}
});

Слушатель будет добавлен непосредственно к XMLHttpRequest объект, который извлекается как первый параметр в обратном вызове beforeSend объекта $.ajax вызов.

Ссылка на основную публикацию
Adblock
detector