4

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 .

skaffman
  • 398,947
  • 96
  • 818
  • 769
Mesut Tasci
  • 2,970
  • 1
  • 30
  • 36

1 Answers1

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.");
}
Joe Coder
  • 4,498
  • 31
  • 41
  • I am adding load listener to the xhr but it is not triggering listener function never. – Mesut Tasci Sep 10 '12 at 07:26
  • I tried the "load" listener after you say.At [load](http://dvcs.w3.org/hg/progress/raw-file/tip/Overview.html#suggested-names-for-events-using-the-progressevent-interface) usage writes "load" listener fires "zero or once", When load listener fires once,when zero ? – Mesut Tasci Sep 11 '12 at 08:58
  • Fires "load" if upload was successful, then fires a "loadend". If not successful, just "loadend" is fired. I've updated the answer. – Joe Coder Mar 06 '13 at 02:03