Html5 слушатель прогресса загрузки ajax-файла не запускается при загрузке 100% на Firefox

Question

Я загружаю файлы через ajax и обрабатываю изображения после загрузки. Когда я пытался загрузить файлы изображений через ajax на firefox, событие xhr не вызывает мою функцию прогресса, когда процент загрузки составляет 100%, но файл успешно загружается.

Google Chrome срабатывает, когда загрузка загружена на 100%, а Firefox - нет.

Вкратце мой скрипт загрузки:

$("#uploadbutton").click(function(){
   var xhr=new XMLHttpRequest()
   ,fd=new FormData();

   xhr.upload.addEventListener("loadstart", uploadStart, false);
   xhr.upload.addEventListener("progress", uploadProgress, false);
   xhr.addEventListener("error", uploadFailed, false);

   xhr.open("POST", mainurl+"ajaxupload.php");

   $.each($("#upload_input").files,function(i,file){
     fd.append("files_"+i,file);
   });    

  xhr.send(fd);

});

function uploadProgress(event){
   var percentComplete = Math.round(event.loaded * 100 / event.total);
   console.log("pecent ",percentComplete);
}

Когда начинается загрузка, функция uploadProgress запускается 1 раз (в основном, когда процент загрузки составляет 80%), но не запускается при загрузке.

Answer 1

В дополнение к вашим текущим обработчикам, добавьте еще два: load (срабатывает при успешном завершении), loadend (срабатывает последний, всегда).

// zero or once
xhr.addEventListener("load", uploadSuccess, false);
function uploadSuccess(event) {
    console.log("Upload successful.");
}

// once
xhr.addEventListener("loadend", uploadComplete, false);
function uploadComplete(event) {
    console.log("All done.");
}