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

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

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

来自/sf/answers/388062181/：

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

我将我的网络限制为 GPRS 来说明这一点：

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

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