Html5 ajax file upload progress listener not triggering when upload 100% on Firefox

Question

I am uploading files over ajax and processing images after upload. When I tried upload image files over ajax on firefox , xhr progress event not triggering my progress function when upload percent do 100% but file was uploading successfully .

Google chrome triggering when upload progress 100% but firefox doesn't.

Biriefly my upload 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 upload start , uploadProgress function runnig 1 times ( mostly when upload percent 80% ), but not triggering when upload fnish .

Joe Coder · Accepted Answer · 2013-03-06 02:00:08Z

2

In addition to your current handlers, add two more: load (fires if successful completion), loadend (fires last, 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.");
}

edited Mar 6, 2013 at 2:00

answered Sep 5, 2012 at 1:00

Joe Coder

4,56534 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mesut Tasci Over a year ago

I am adding load listener to the xhr but it is not triggering listener function never.

Mesut Tasci Over a year ago

I tried the "load" listener after you say.At load usage writes "load" listener fires "zero or once", When load listener fires once,when zero ?

Joe Coder Over a year ago

Fires "load" if upload was successful, then fires a "loadend". If not successful, just "loadend" is fired. I've updated the answer.

Collectives™ on Stack Overflow

Html5 ajax file upload progress listener not triggering when upload 100% on Firefox

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related