同期XMLHttpRequestコールの進捗状況

Question

クライアント側では、ユーザーがサーバーにアップロードする必要がある複数のファイルをドロップできるFile-Dropzone（HTML5 File-API）があります。各ファイルに対して、新しいXMLHttpRequestオブジェクトが作成され、ファイルはサーバーに非同期に送信されます。私は進捗状況を進捗状況イベントxhr.uploadオブジェクトのイベントリスナーで監視しています。

問題は、サーバー側でファイルを同期させる必要があるということです。これはサーバー側で次々とファイルを実行する必要があり、残念ながらその実装を変更できないためです。しかし、同期してファイルを送信するためにxhrオブジェクトを設定した場合、進捗イベントで登録した関数はもう起動しないため、進行状況を監視することができません。

誰でも助けてもらえますか？ （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：クライアント側では、一度に1つずつアップロードしてアップロードするファイルのスタックを作成し、前の「完了」コールバックで次のファイルを呼び出します。