XMLHttpRequest 错误进度

Question

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

问题是 XMLHttpRequest 进度事件引发了一个奇怪的行为。实际上传未完成时达到100%太快了，有时刚启动，用chrome开发工具和系统监视器监控。

因此，虽然计算出的进度是 100%，但我等待发送文件的时间太长，而页面显然被卡住了。我读过防病毒软件可能是造成这种情况的原因，但事实并非如此。我没有防病毒软件，我也关闭了防火墙。我尝试在 windows 和 ubuntu 中使用 chrome、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

如果说要发出进度通知，则在下载过程中，排队一个任务以触发名为 progress 的进度事件，大约每 50 毫秒或接收到的每个字节，以最不频繁的为准。

如果说要让上传进度通知运行这些步骤：

• 在上传请求实体正文和上传时 完成标志为假，将任务排队以触发名为的进度事件 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?