FileReader.onload内で 'i'（forループ）の値を表示するには

Question

input fileで複数の画像ファイルのプレビューを表示し、それぞれに特定のID（forループから生成）を割り当てようとしています。すべて正常に動作していますが、idを割り当てる際に問題があります。

私のコードは、私が

今すぐ上記のコードに応じて、私はすべてのファイルのプレビューを取得していますが、そのIDに問題があるこの機能を使用するためのonclickのを使用してい

function fileSelected() { 
var files = event.target.files; 
    for(var i=0; i<files.length; i++) { 


    var reader = new FileReader(); 
reader.onload = function(event) { 
    var picWrap = '<img id="'+i+'" src="'+event.target.result'" />'; 
} 
reader.readAsDataURL(files[i]); 
} } 

です。私は2つのファイルを選択する場合、結果のように

は

(filePreview) Id = 2 
(filePreview2) Id = 2 

であると私は3つのファイルを選択した場合、私はすべての3つのファイルのプレビューを取得するが、そのIDは、各PICのための3になり、私は1つのファイルを選択した場合0の値ではなく1になります。

Answer 1

onloadイベントが発生すると、ループインデックスは最後の値になり、ループはすでに終了しています。 1つのオプションは、私はバインドを呼び出すときに指定された値にコールバックで設定し、以下を行うには、次のようになります。

reader.onload = (function(i, event) { 
    var picWrap = '<img id="'+i+'" src="'+event.target.result'" />'; 
}).bind(reader, i);