使用 Javascript 上传进度(带或不带 XMLHttpRequest 2)

发布于 2024-10-07 05:06:29 字数 583 浏览 4 评论 0原文

XMLHttpRequest 2 有一个新东西。它可以上传文件。我成功了(非常简单)。现在我想知道是否有办法获取该文件的上传进度。我通常对此不感兴趣,但在 Google Chrome (8) 中,我看到 onreadystatechange 事件是一个 XMLHttpRequestProgressEvent。进度...其中没有任何关于上传进度的内容(只是请求状态),但这让我想知道。

本地上传大文件时,Google Chrome 有一个进度“计数器”。这是标准的。它始终存在且不可配置。它在状态栏中。 Javascript 可以实现类似的功能吗?我想把它放在一个漂亮的 元素或其他东西中。

我不需要 SWF 或 Java 上传器(带有轮询和 >JS 回调)。它必须是原生的。如果浏览器能做到的话,现在Javascript也应该能做到吧!? =)

如果没有 XMLHttpRequest 2,我想使用非常标准的文件上传是不可能的(没有ajax,只有 )。

感谢您的信息

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

小情绪 2024-10-14 05:06:29

挂钩进度事件。这将为您的所有请求带来进展。首先检查上传对象是否可用——这只会为您提供上传部分的进度。

像这样的东西:

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

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
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文