javascript - XMLHttpRequest 错误进度

Question

我在使用 javascript 上传表单并监控其进度时遇到问题。

问题是 XMLHttpRequest 进度事件以一种奇怪的行为引发。真正上传未完成时达到 100% 太快，有时刚开始，使用 chrome 开发工具和系统监视器进行监控。

因此，虽然计算的进度为 100%，但我等待了很长时间才能发送页面明显卡住的文件。我读过杀毒软件可能是原因，但事实并非如此。我没有杀毒软件，我也关闭了防火墙。我尝试使用 chrome、windows 和 ubuntu 中的 firefox 以及具有相同行为的 jquery 表单插件等库。

有人对这种奇怪的行为有解释。 XMLHttpRequest 进度事件加载属性实际计数是多少？

提前致谢。我像撞墙一样摔了一天。

这里有一小段代码可以重现这个问题:

<?php
echo "Hello!";

if(isset($_FILES['file'])){
    echo " File received";
    return;
}
?>

<form  method='post' action='' enctype='multipart/form-data'>
   <input type='file' name='file' />
   <input type='submit'>
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(document).ready(function(){
    $('form').submit(function(e){
        e.preventDefault();
        ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function ()
        {
            console.log("READY STATE CHANGED");
            console.log(ajax);
        };

        ajax.upload.addEventListener("progress", function (event) {

            var percent = (event.loaded / event.total) * 100;
            console.log(percent);

        });

        ajax.open("POST", $(this).attr('action'), true);
        ajax.send(new FormData(this));
        return false;
    });

});
</script>

Answer 1

XMLHttpRequestUpload progress 事件大约每 50 毫秒发送一次。 XMLHttpRequestUpload 调度关于 body 传输字节的事件。据了解，XMLHttpRequestUpload 不会监控与 body 传输字节相关的网络性能，也不会等待服务器的响应。

参见 Make upload progress notifications

当据说要发出进度通知时，在下载过程中，排队任务以大约每 50 毫秒或每收到一个字节触发一个名为 progress 的进度事件，以频率最低者为准。

当据说制作上传进度通知时运行这些步骤:

• 在上传请求实体正文和上传时 完成标志为假，将任务排队以触发名为 progress在 XMLHttpRequestUpload 对象上大约每 50 毫秒或 传输的每个字节，以最少频率为准。

• 如果request entity body已成功上传并且 upload complete flag仍然是假的，排队一个任务来运行这些 子步骤:

  1. 将上传完成标志设置为真。

  2. Fire a progress event在 XMLHttpRequestUpload 对象中命名为 load。

  3. 在 XMLHttpRequestUpload 对象上触发一个名为 loadend 的进度事件。

---

另见 How to read and echo file size of uploaded file being written at server in real time without blocking at both server and client?