XmlHttpRequest onprogress 间隔答案

【问题标题】：XmlHttpRequest onprogress intervalXmlHttpRequest onprogress 间隔
【发布时间】：2011-07-26 14:54:55
【问题描述】：

我正在使用 XmlHttpRequests 将图像上传到服务器，我想向用户显示这些上传的进度。

不幸的是，对我的 onprogress-event 处理程序的调用之间的间隔太大。对于 500k 的图像，通常只调用一次或两次 onprogress。

这是我的代码：

/* This function is not called often enough */
function progress(e){
    console.log('Uploading: ' + Math.round((e.loaded / e.total) * 100) + ' %');
}

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', progress, false);
xhr.send(data);

是否可以更改此行为，或者是否可以在浏览器实现中的某处对其进行硬编码？

【问题讨论】：

这个怎么样？ How to get progress from XMLHttpRequest
@mplungjan 我的问题是没有取得进展。我的问题是我的事件处理程序被调用的频率。我已经更新了我的问题以澄清。
@Oscar - 我意识到，但是我发布的帖子有很多不同方式的例子
我还没有测试过，但是有一个使用 PHP 上传进度模块的 jQuery 插件，它也可以显示进度。也许它有帮助：nixboxdesigns.com/demos/jquery-uploadprogress.php。我想它会变得有点复杂，但可能值得一试。
你在哪些浏览器中测试过这个？

标签： javascript ajax xmlhttprequest

【解决方案1】：

W3 在其XMLHttpRequest Level 2 文档中提出了以下准则。显然，跨浏览器的不同级别的一致性是可以预料的。

上传：

当请求实体正文被上传并且上传完成标志为假时，排队一个任务以在 XMLHttpRequestUpload 对象上触发一个名为 progress 的进度事件，大约每 50 毫秒或传输的每个字节，以最不频繁的为准。 - W3 XMLHttpRequest Level 2（粗体表示强调）

下载：

如果说要发出进度通知，则在下载过程中，排队一个任务以触发一个名为 progress 的进度事件，大约每 50 毫秒或接收到的每个字节，以最不频繁的为准。 - W3 XMLHttpRequest Level 2（粗体表示强调）

我不知道自定义此功能的 api。

【讨论】：

谢谢。出于某种原因，我从未想过要检查规格。
在 3 种不同的浏览器中尝试过，似乎直到从服务器接收到至少 69 字节的数据后才会触发进度事件。之后，它可以被每个额外的字节触发。看起来浏览器的行为符合这个标准，但只是在接收到前 69 个字节之后。
@SamBull 很高兴知道！我一直在绞尽脑汁想弄清楚为什么我的 10、9、8……倒计时测试在完全完成之前没有触发任何进度指示器！
@SamBull 嗯，不幸的是，即使我发送 100 个字节，然后在 10 秒内每秒发送一个字节，我仍然在所有内容都传输完毕之前没有收到任何进度指示器!
好的，因为在过去几周进行了测试，Chrome 似乎已经改变了行为，现在需要 1024 字节。我已经调整了那个脚本，所以你可以看到你的浏览器是在 69 还是 1024 触发的。

【解决方案2】：

另外，请注意本地调试 HTTP 代理（例如 Charles）往往会影响进度事件触发间隔。

【讨论】：