複数のテキストファイルをアップロードし、jqueryで画面にプリロードする

Question

アップロードするよう選択したテキストファイルのコンテンツを画面に表示しようとしています。しかし、最後のファイルのみを表示しています。 誰かがなぜこの問題が起こったのか、そしてすべてのファイルの内容を表示するために何ができるのですか？

HTML

<input type="file" id="file_upload" accept='text/plain' multiple><br> 
<span id="output"></span> 

スクリプト

$('#file_upload').on("change", function(){ 
    var reader = new FileReader(); 

    for (var i = 0, f; f = $(this).get(0).files[i]; i++) { 
     var reader = new FileReader(); 

     $('#output').append('<br>');    
     $('#output').append('<div>'+'<strong>'+$(this).get(0).files[i].name+'</strong>'+'</div>'); 
     reader.readAsText($(this).get(0).files[i]); 

     reader.onload = function(){ 
      var text = reader.result; 
      $('#output').append('<div>'+reader.result.substring(0, 200)+'</div>'); 
     }; 

    } 

}); 

Answer 1

readerはonloadのコールバックは、読者の値は、最後に作成されたものとないものになる発射したときに、すべてのループ繰り返し上書きされていますコールバックはにバインドされています。
コールバックはそれぞれのリーダーにバインドされているため、キーワードを使用して参照することができます。オンロードコールバックのイベントパラメータを使用して、正しいリーダーを識別することもできます。

reader.onload = function(e){ 
     var text = this.result; 
     //var text = e.target.result; 
     $('#output').append('<div>'+text.substring(0, 200)+'</div>'); 
    };