javascript - XMLHttpRequest onprogress 不触发异步 = false

标签 javascript ajax asynchronous xmlhttprequest form-data

当发送带有 async = false 的 XMLHttpRequest 时,xhr.upload.onprogress 事件永远不会在文件上传时触发。

来源:

var form = new FormData();
form.append("name", files[i].name);
form.append("size", files[i].size);
form.append("type", files[i].type);
form.append("image", files[i]);

var xhr = new XMLHttpRequest();

xhr.upload.onprogress = function(evt){
    alert("Progress event fired!");
    if (evt.lengthComputable) 
    {
        var percentComplete = (evt.loaded / evt.total)*100; 
        console.log(percentComplete); 
    } 
};

xhr.onload = function() {
    console.log(files[i].name + " uploaded!");
};

xhr.open("post", "/images/upload", false);
xhr.send(form);

我已经在 Firefox 和 Chrome 中测试过了。

我不知道我是否遗漏了一些文档,但找不到任何表明当 async = false 时没有触发 xhr.upload.onprogress 事件的内容?

如果我将请求更改为使用 async = true 运行,它就会被触发。

最佳答案

基本上您不应该使用同步请求,尤其是在文件上传中,这可能需要一些时间。

使用同步请求,您可以阻止线程执行,直到一切都完成(文件已​​上传),即使 onprogress 事件已经被触发,您也可以不更新任何进度条,因为 UI 和所有其他处理(但文件上传)将被阻止。

创建这些事件是为了让您可以处理异步请求。

如果您阅读 here ,您会看到同步请求在某些浏览器版本中已被弃用。

关于javascript - XMLHttpRequest onprogress 不触发异步 = false,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26449106/

相关文章:

javascript - 使用 AJAX 响应作为函数外部的 var

c# - 如何在同一站点的 ashx 和 aspx 文件中使用 await/async?

javascript - 处理可能异步的动态脚本

javascript - extjs 存储代理不为 xtype 调用

javascript - 为什么调试器显示一个值并且在返回 number++ 时不返回正确的数字 javascript

javascript - 可能的嵌套异步函数

javascript - 何时转义使用 AJAX 发送的数据

javascript - 无需重新加载即可返回上一页

php - 如何使用 Zend Framework 通过 Ajax 加载 View ?

事件队列内的 JavaScript 函数未按预期移至调用堆栈