javascript - Ajax file upload progress event not firing - Stack Overflow

admin管理员组

文章数量:1356575

I am uploading a file via ajax request, by simply splitting them in to chunks.

The problem is progress event, Firefox for some reason doesn't want to fire that event, here is my code (most of the unnecessary code is removed)

//slice file
if(file.mozSlice){
    chunk   = file.mozSlice(startByte, endByte);
}else if(file.slice){
    chunk   = file.slice(startByte, endByte);
}else{
    chunk   = file;
    isLast  = true;
}


var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(e){
    console.log('progress');
}, false);

xhr.upload.addEventListener('error', function(e){
    console.log("upload error!");
});

xhr.onreadystatechange = function(e){
    if(this.readyState == 4 && this.status == 200){
        //this chunk has bee uploaded, proceed with the next one...
    }
}

xhr.open('POST', "", true);

xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');//header
xhr.setRequestHeader('Content-Type', 'application/octet-stream');//generic stream header
xhr.send(chunk);

I'm sure i haven't made any big mistakes since chrome works without any problems, so there must be some Firefox related issue.

I am uploading a file via ajax request, by simply splitting them in to chunks.

The problem is progress event, Firefox for some reason doesn't want to fire that event, here is my code (most of the unnecessary code is removed)

//slice file
if(file.mozSlice){
    chunk   = file.mozSlice(startByte, endByte);
}else if(file.slice){
    chunk   = file.slice(startByte, endByte);
}else{
    chunk   = file;
    isLast  = true;
}


var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(e){
    console.log('progress');
}, false);

xhr.upload.addEventListener('error', function(e){
    console.log("upload error!");
});

xhr.onreadystatechange = function(e){
    if(this.readyState == 4 && this.status == 200){
        //this chunk has bee uploaded, proceed with the next one...
    }
}

xhr.open('POST', "", true);

xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');//header
xhr.setRequestHeader('Content-Type', 'application/octet-stream');//generic stream header
xhr.send(chunk);

I'm sure i haven't made any big mistakes since chrome works without any problems, so there must be some Firefox related issue.

• javascript
• ajax
• firefox

Share Improve this question Follow asked Apr 16, 2013 at 13:48 LinasLinas 4,4081919 gold badges7474 silver badges120120 bronze badges 3

• 1 Maybe it pletes so fast there is never any progress to report? – Halcyon Commented Apr 16, 2013 at 13:49
• No it doesn't i have tried with large files and i can see chunks being uploaded, sometimes it takes ~3secs for the chunk to be uploaded. – Linas Commented Apr 16, 2013 at 13:50
• The code you listed here appears to be correct, and I am not seeing any progress event notification issues in Firefox myself. So, there is likely something you are leaving out that is causing problems in your client-side code. Without a live example, it may be difficult to determine the exact source of your problem. – Ray Nicholus Commented Apr 16, 2013 at 14:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

for Chrome:

xhr.upload.addEventListener('progress', function(e) {
    console.log('progress');
}, false);

for Firefox:

xhr.addEventListener('progress', function(e) {
    console.log('progress');
}, false);

I checked my implementation I'm adding the progress event after I call xhr.open, maybe that fixes it?

Try the 2nd code sample here: https://developer.mozilla/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress does that work?

本文标签： javascriptAjax file upload progress event not firingStack Overflow