Question

使用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运行的请求，则会触发它。

Answer 1

基本上你应该不使用同步请求，特别是在文件上传中，这可能需要一些时间。

使用同步请求，您阻止线程执行，直到完成所有操作（文件上传），即使onprogress事件被触发，您也无法更新任何请求进度条，因为UI和所有其他处理（但文件上传）将被阻止。

创建了这些事件，以便您可以处理异步请求。

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

XMLHttpRequest onprogress未在async = false上触发

1 个答案: