ajax - Upload progress (with or wo XMLHttpRequest 2) with Javascript - Stack Overflow

admin管理员组

文章数量:1317906

XMLHttpRequest 2 has a new thing. It can upload files. I got that working (it's super easy). Now I'm wondering if there's a way to get the upload progress of that file. I wouldn't be interested in this normally, but in Google Chrome (8) I saw that the onreadystatechange event is a XMLHttpRequestProgressEvent. Progress... There's nothing in there about upload progress (just request state), but it made me wondering.

Google Chrome has a progress 'counter' when uploading big files natively. It's standard. It's always there and unconfigurable. It's in the statusbar. Is something like that possible with Javascript? I'd like to put it in a nice <progress> element or something.

I don't want SWF or Java uploaders (with polling and >JS callbacks). It has to be native. If the browser can do it, these days Javascript should be able to do it, right!? =)

In case of no XMLHttpRequest 2, I guess it wouldn't be possible with the very standard file upload (no ajax and just a <input type=file>).

Thanks for the info

XMLHttpRequest 2 has a new thing. It can upload files. I got that working (it's super easy). Now I'm wondering if there's a way to get the upload progress of that file. I wouldn't be interested in this normally, but in Google Chrome (8) I saw that the onreadystatechange event is a XMLHttpRequestProgressEvent. Progress... There's nothing in there about upload progress (just request state), but it made me wondering.

Google Chrome has a progress 'counter' when uploading big files natively. It's standard. It's always there and unconfigurable. It's in the statusbar. Is something like that possible with Javascript? I'd like to put it in a nice <progress> element or something.

I don't want SWF or Java uploaders (with polling and >JS callbacks). It has to be native. If the browser can do it, these days Javascript should be able to do it, right!? =)

In case of no XMLHttpRequest 2, I guess it wouldn't be possible with the very standard file upload (no ajax and just a <input type=file>).

Thanks for the info

• javascript
• ajax
• file
• upload
• progress

Share Improve this question Follow asked Dec 10, 2010 at 17:26 RudieRudie 53.9k4242 gold badges135135 silver badges175175 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Hook the progress event. That will give you progress for all requests. Check first to see if the upload object is available -- that will give you progress for only the upload part.

Something like this:

var xhr; // this is your XMLHttpRequest

// hook to upload events if available, otherwise snag all progress events
var eventSource = xhr.upload || xhr;

eventSource.addEventListener("progress", function(e) {
    // normalize position attributes across XMLHttpRequest versions and browsers
    var position = e.position || e.loaded;
    var total = e.totalSize || e.total;

    // TODO: display progress
});

本文标签： ajaxUpload progress (with or wo XMLHttpRequest 2) with JavascriptStack Overflow