Javascriptを使用してサイクル変数をイベントコールバック関数に渡す方法

Question

XMLHttpRequestを使用して複数のファイルを同時にアップロードしています。私は各ファイルに独自の進捗インジケータを持たせたい。だから、私がアップロードするファイルの配列を得るとき、私は

for(var i=0; i<files.length; i++)      
{ 
    // Create transfer object 
    var xhr = new XMLHttpRequest(); 

    // Attach progress event handler 
    xhr.addEventListener('progress', function(e) { showProgress .... }); 

.... 
} 

のようなサイクルのための内部にそれらのそれぞれのアップロードを開始する問題は、プログレスコールバック関数に正しい「i」の値を渡す方法、です。このように "i"を使用した場合：

xhr.addEventListener('progress', function(e) { console.log(i); }); 

私は常に最新の "i"値を取得します。場合は、このように定義する：

xhr.addEventListener('progress', (function(i,e) { console.log(i); })(i)); 

私は正しいが、私は実際に進捗を得ることはありませんイベントオブジェクト "e"を取得します。それを定義する正しい方法は何ですか？

Answer 1

xhr.progressの代わりにxhr.upload.progressを使用してください。

連結iとclassName"progress-"有する新しいprogress要素を作成し、生命維持にiを渡し、生命維持を作成し、uploadprogressイベント内e.loadedに現在の進捗要素.valueを更新します。またUpload multiple image using AJAX, PHP and jQuery

for(var i=0; i<files.length; i++) { 
    // Create transfer object 
    (function(curr) { 
    // `i` : `curr` 
    var xhr = new XMLHttpRequest(); 
    var progress = document.createElement("progress"); 
    progress.setAttribute("max", files[curr].size); 
    document.body.appendChild(progress); 
    progress.className = "progress-" + curr; 
    // Attach progress event handler 
    xhr.upload.addEventListener("progress", function(e) { 
     // update current `progress` `value` 
     document.querySelector(".progress-" + curr).value = e.loaded; 
    }); 
    xhr.open("POST", "/path/to/server/"); 
    xhr.send(new FormData(files[curr])); 
    }(i)); // pass `i` to IIFE 
} 

jsfiddle https://jsfiddle.net/ytedpcro/1/