监控同步 XMLHttpRequest 调用的进度

Question

在客户端，我有一个 File-Dropzone (HTML5 File-API)，用户可以在其中放置多个应该上传到服务器的文件。对于每个文件，都会创建一个新的 XMLHttpRequest 对象，并将该文件异步发送到服务器。我正在通过 xhr.upload 对象上的 progress 事件监听器监控进度。

问题是，到目前为止，服务器端需要同步获取文件，因为发生了一些计算，必须在服务器端一个接一个地完成一个文件，不幸的是我无法更改该实现。但是，如果我将 xhr 对象设置为同步发送文件，我在 progress 事件中注册的函数将不再触发，因此我无法监控进度。

有人可以帮忙吗？ （如果有使用 jQuery 的原生功能的解决方案，我也可以使用它。

这是我目前使用的代码的重要部分：

for (var i = 0; i < files.length; i++) {
           var file = files[i];                              

           var xhr;
           if (window.XMLHttpRequest)
              xhr=new XMLHttpRequest();
           else
              xhr=new ActiveXObject("Microsoft.XMLHTTP");

           xhr.upload.addEventListener('progress',function(ev){
               var percent = Math.round((ev.loaded/ev.total) * 100);                                       
               console.log(i + " : " + percent + "%");                                     
               progress.style.width = percent +'%';   
               if(progressHtml)
                   progressHtml.innerHTML = i + "/" + files.length + " : " + percent + "%";
            }, false);

            xhr.open("post", "/servlet/de.test.UploadDropServ", false); //synchronous                                    
            xhr.setRequestHeader("Filename", file.name);
            xhr.setRequestHeader("UniFilename", file.name);            
            xhr.send(file);          

            xhr.addEventListener("load", function () {                    
                progress.style.width = "100%";                                      
            }, false);                                                                                               
         }
     }     

Answer 1

所以现在的问题是您不希望它是异步的。

当您将请求设置为同步时，javascript 将等到它完成后再执行任何其他操作，包括进度回调。

如果您希望进度回调起作用，您需要它是异步的。 为此，您有两种解决方案：

1：如果服务器端是PHP，启动会话但不要关闭它，它将是同步的。

2：在客户端，创建一堆文件上传，一次上传一个，在前一个的“Complete”回调中调用下一个。