XHR Progress 仅触发一次答案

【问题标题】：XHR Progress Only Firing OnceXHR Progress 仅触发一次
【发布时间】：2015-04-21 08:08:28
【问题描述】：

我正在尝试为文件上传创建进度条，但由于某种原因，XHR 进度响应最后只触发一次。但是，如果我打开 firebug 窗口，它可以 100% 正常工作（在整个文件上传过程中触发）。我正在本地主机上测试这个。

我的代码很长，但要点如下：

is_uploading = $.ajax({
  url: "/includes/upload.php?a=" + a_id,
  type: "POST",
  data: formdata,
  processData: false,
  contentType: false,
  dataType: "JSON",
  xhr: function () {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) {
      alert('yay');//test to see if the event is firing...this should be alerting A LOT
      if (evt.lengthComputable) {
        //do stuff
      }
    }, false);

    return xhr;
  }

  ...more options here beforesend, success, etc

在过去的几个小时里，我一直在努力解决这个问题，因此我们将不胜感激。我不知道为什么它在 firebug 控制台打开的情况下工作，但只有在它关闭时才会在最后触发......

【问题讨论】：

一般你还会添加一个xhr.addEventListener("progress" ... 处理程序，你看过网上很多例子吗？
是的，我在网上看了很多例子。我相信您已经知道，xhr.addEventListener 将用于监视下载事件。我只对上传感兴趣。
根据here 提到的最新支持，尝试在xhr 而不是xhr.upload 上注册事件处理程序
我已经尝试在 xhr 上注册它，但无济于事。从您链接的支持文档中：“下载和上传传输都存在进度事件。下载事件在 XMLHttpRequest 对象本身上触发，如上面的示例所示。上传事件在 XMLHttpRequest.upload 对象上触发，如如下图”
为什么dataType会是JSON？

标签： javascript jquery xmlhttprequest

【解决方案1】：

这可能与上传文件的大小和/或您的上传速度有关。

如果您要上传相对较小的内容，则上传将“立即”完成，而不是在上传期间触发进度事件，而是仅在完成时触发一次：

来自https://stackoverflow.com/a/5543745/11743318：

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

为了说明这一点，我已将我的网络限制为 GPRS：

从图像中可以看出，在不限制上传的情况下，上传发生得如此之快，以至于进度事件仅在完成时触发一次。进度条的宽度应用了过渡，因此它不会跳转到 100%，而是平滑填充。

但是，在下图中，当限制到 GPRS 时，可以看到总共触发了 36 个事件。链接答案中提到的特定于浏览器的实现在这里很明显，每传输一次 2560 位 = 320 字节 都会触发事件。

【讨论】：