XHR仅进行一次射击

Question

我正在尝试为文件上传创建进度条，但由于某种原因，XHR进度响应仅在结束时触发一次。但是，如果我打开了firebug窗口，它可以100％正常工作（在整个文件上传期间触发）。我在localhost上测试它。

我的代码很长，但这是它的要点：

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控制台打开一起工作，但只有在它关闭时才开火......

Answer 1

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

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

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

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

---

我已经限制了我的网络使用GPRS来说明这一点：

您可以从图像中看到，在不限​​制上传的情况下，上传是如此之快，以至于进度事件在完成时仅触发一次。进度条的宽度已应用过渡，因此不会跳到100％。

尽管在下面的图像中，将其调至GPRS，则可以看到总共触发了36个事件。在此处可以看到链接答案中提到的特定于浏览器的实现，在该事件中，每传输 2560位= 320字节就会触发事件。