Html5 ajax file download listener does not start when loading 100% in Firefox

Question

I upload files via ajax and process images after upload. When I tried to load image files on top of ajax in firefox, the xhr progress event does not fire my progress function when the load percentage is 100%, but the file loads successfully.

Google chrome starts at 100% load, but firefox does not.

Biriefly my loading script:

$("#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); } 

When downloading starts, the uploadProgress function starts 1 time (mainly when loading 80% percent), but does not start when fnish downloads.

Answer 1

In addition to your current handlers, add two more: load (triggers on success), loadend (last fires, always).

 // 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."); }