javascript - XHR 进度仅触发一次

Question

我正在尝试为文件上传创建一个进度条，但由于某种原因，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 控制台打开的情况下工作，但只有在关闭时才会在最后触发......

Answer 1

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

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

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

While the request entity body is being uploaded and the upload complete flag is false, queue a task to fire a progress event named progress at the XMLHttpRequestUpload object about every 50ms or for every byte transmitted, whichever is least frequent. - W3 XMLHttpRequest Level 2

<小时/>

我已将网络限制为 GPRS 来说明这一点:

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

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