Mehrere Textdateien hochladen und mit jquery auf dem Bildschirm laden

Question

Ich versuche, den Inhalt einiger Textdateien, die ich hochladen möchte, auf dem Bildschirm anzuzeigen. Zeigt aber nur die letzte Datei an. Kann mir jemand sagen, warum das passiert ist und was kann ich tun, um den Inhalt aus allen Dateien zu zeigen?

HTML

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

Script

$('#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 jede Schleifeniterationslatenzzeit überschrieben wird, wenn der onload Rückruf den Wert des Lesers ausgelöst wird derjenige sein, der zuletzt erstellt und nicht derjenige war, der Callback ist verpflichtet.
Da der Callback an seinen jeweiligen Leser gebunden ist, können Sie das Schlüsselwort this verwenden, um den Referenzwert des Onload-Callbacks zu identifizieren.

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