由网友(放过才知错过)分享简介：在客户方，我有一个文件，悬浮窗（HTML5文件-API），用户可以丢弃，应上传到服务器上的多个文件。对于每一个文件一个新XMLHtt prequest对象被创建，该文件被异步发送到服务器。我通过进步xhr.upload对象事件监听器监控进度。现在的问题是，随着现在的服务器端需要得到的文件同步，因为有一些计算发生之后又必...

在客户方，我有一个文件，悬浮窗（HTML5文件-API），用户可以丢弃，应上传到服务器上的多个文件。对于每一个文件一个新XMLHtt prequest对象被创建，该文件被异步发送到服务器。我通过进步xhr.upload对象事件监听器监控进度。

现在的问题是，随着现在的服务器端需要得到的文件同步，因为有一些计算发生之后又必须做一个文件在服务器端，不幸的是我不能改变的实现。但是，如果我设置XHR对象以异步方式发送的文件，我注册了进度事件将不会触发了，所以我不能够监测进展情况。

功能

任何人都可以帮助吗？ （如果使用的原生功能的解决方案的jQuery ，我也可以使用）。

下面是我目前使用的code中的重要组成部分：

 的（VAR I = 0; I＆LT; files.length;我++）{
           var文件=文件[I]

           VAR XHR;
           如果（window.XMLHtt prequest）
              XHR =新XMLHtt prequest（）;
           其他
              XHR =新的ActiveXObject（Microsoft.XMLHTTP）;

           xhr.upload.addEventListener（'进步'，函数（EV）{
               变种百分比= Math.round（（ev.loaded / ev.total）* 100）;
               的console.log第（i +：+百分之+％）;
               progress.style.width =百分比+'％';
               如果（progressHtml）
                   progressHtml.innerHTML = 1 +/+ files.length +：+百分之+％;
            }， 假）;

            xhr.open（后，/servlet/de.test.UploadDropServ，假）; //同步
            xhr.setRequestHeader（文件名，file.name）;
            xhr.setRequestHeader（UniFilename，file.name）;
            xhr.send（文件）;

            xhr.addEventListener（负荷，函数（）{
                progress.style.width =100％;
            }， 假）;
         }
     }
 

解决方案

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

当你设置你的要求同步时，JavaScript会等到它做别的，包括进度回调之前完成。

如果你想有一个进度回调的工作，你需要它是异步的。 要做到这一点，有两种解决方法：

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

2：在客户端，创建一堆文件上传，上传一次，称下一个上的previous完整回调

On the clientside i have a File-Dropzone (HTML5 File-API) where the user can drop multiple files that should be uploaded to the server. For each file a new XMLHttpRequest Object is created and the file is sent asynchronously to the server. I'm monitoring the progress through a progress event Listener on the xhr.upload object.

The problem is, that as of now the server side needs to get the files synchronously because there is some calculation happening that must be done one file after another on the server-side and unfortunately i cannot change that implementation. But if i set the xhr object to send the files synchronously the function that i registered with the progress event will not fire anymore so i'm not able to monitor the progress.

Can anyone help with that? (If there is a solution using the native functionality of jQuery, i can also use that).

Here's the important part of the code i'm currently using:

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);                                                                                               
         }
     }     

解决方案

So the problem now is that you DO NOT want it to be asynchronous.

When you set your request to synchronous, the javascript will wait till it is complete before doing anything else, including the progress callback.

If you want a progress callback to work, you need it to be asynchronous. To do so, you have two solutions :

1: If server-side is PHP, start the session but DO NOT close it, and it will be synchronous.

2: On the client-side, create a stack of files to upload and upload one at a time, calling the next one on the "Complete" callback of the previous.