上传进度（或W / O XMLHtt prequest 2）使用Javascript

问题描述：

XMLHtt prequest 2 有一个新的东西。它可以上传文件。我得到的工作（这是超级容易）。现在，我不知道是否有一种方式来获得该文件的上传进度。我不会有兴趣在这个正常，但在谷歌浏览器（8）我看到onreadystatechange事件是 XMLHtt prequestProgressEvent 。进展...有没有在那里大约上传进度（只要求状态），但它让我知道。

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.

谷歌浏览器有进步计数器本地上传大文件时。它的标准。它总是在那里，不可配置。这是在状态。是类似的东西可能使用Javascript？我希望把它放在一个漂亮的＆LT;进度与GT; 元素或某事

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.

我不想SWF或Java上传者（与轮询和> JS回调）。它必须是原生。如果浏览器能做到这一点，这几天的Javascript应该是能够做到这一点，对吧！？ =）

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!? =)

在案件没 XMLHtt prequest 2 ，我想这是不可能用很标准的文件上传（没有AJAX，只是一个＆LT;输入类型=文件＆gt; ）

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>).

感谢您的信息

答

挂钩的进展情况。这会给你的所有要求进步。首先检查，看是否上传对象可用 - 这将使你只上传部分进展

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.

事情是这样的：

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
});

上传进度（或W / O XMLHtt prequest 2）使用Javascript

相关推荐