在同步XMLHttpRequest调用中监控进度

Question

在同步XMLHttpRequest调用中监控进度

3

在客户端，我有一个文件拖放区（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);                                                                                               
         }
     }

- Chris

请查看http://www.plupload.com/example_queuewidget.php，了解多浏览器jQuery实现。文档很棒，提供GPL v2和OEM许可证。 - Bob Gregor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Olivier St-L · Accepted Answer

现在的问题是，您不希望它是异步的。当您将请求设置为同步时，JavaScript 将等待直到完成后再执行任何其他操作，包括进度回调。如果您想要进度回调起作用，您需要将其设置为异步。要这样做，您有两个解决方案：

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

2：在客户端上，创建一个文件上传堆栈，并逐个上传文件，在前一个 "Complete" 回调中调用下一个文件。