javascript - XMLHttpRequest 错误进度

我在使用 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>

最佳答案

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

见 Make upload progress notifications

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

当说要进行上传进度通知时，请运行以下步骤:

在上传请求实体主体时
完成标志为假，将任务排队以触发名为的进度事件
progress 在 XMLHttpRequestUpload 对象上大约每 50 毫秒或
传输的每个字节，以频率最低者为准。

如果 request entity body 上传成功并且 upload complete flag 仍然为 false，则将任务排队运行这些
子步骤:

将上传完成标志设置为 true。

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

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

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

关于javascript - XMLHttpRequest 错误进度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42516195/