Problem in einer for-Schleife, nur den letzten Artikel

Question

Ich benutze FileReader, um den Inhalt aller ausgewählten Dateien zu lesen. Nachdem ich sie mit der fileReader-API gelesen habe, füge ich den Inhalt an das DOM an. Das funktioniert perfekt. Erzeugt ein p Element pro Datei.

Jetzt möchte ich auch jeden Dateiinhalt auf lokalen Speicher speichern. Leider speichert es nur den letzten Artikel. Was läuft falsch? Danke für deine Tipps.

JS

$("input[name='uploadFile[]']").on("change", function() { 

    var files = !!this.files ? this.files : []; 
    if (!files.length || !window.FileReader) 
     return; 

    for (var i = 0; i < files.length; i++) { 

     (function(file) { 
      var name = file.name; 
      var reader = new FileReader(); 
      reader.onload = function(e) { 
       var textObject = event.target.result.replace(/\r/g, "\n"); 
       var textHTML = event.target.result.replace(/\r/g, "<br/>"); 

       var text = e.target.result; 
       var p = document.createElement("p"); 
       p.innerHTML = textHTML; 
       $('#results').append(p);  
       localStorage.setItem('letter'+ i, JSON.stringify(textObject)); 
      }; 

      reader.readAsText(file, 'ISO-8859-1'); 
     })(files[i]); 

    } 

}); 

Answer 1

Das Problem besteht darin, dass durch die Zeit der onload abgefeuert wird, hat i von der Schleife geändert. Dies bedeutet, dass sich localStorage.setItem('letter'+ i immer auf das letzte Element im Array bezieht. Sie haben tatsächlich den richtigen Fix bereits - den sofort aufgerufenen Funktionsausdruck -, aber Sie müssen auch i als Parameter hinzufügen.

(function(file, index) { 
     var name = file.name; 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      var textObject = event.target.result.replace(/\r/g, "\n"); 
      var textHTML = event.target.result.replace(/\r/g, "<br/>"); 

      var text = e.target.result; 
      var p = document.createElement("p"); 
      p.innerHTML = textHTML; 
      $('#results').append(p);  
      localStorage.setItem('letter'+ index, JSON.stringify(textObject)); 
     }; 

     reader.readAsText(file, 'ISO-8859-1'); 
    })(files[i], i); 

Answer 2

Es gibt auch eine andere Lösung, wenn Sie let

let verwenden können, können Sie Variablen deklarieren, die in ihrem Umfang auf den Block, Anweisung oder ein Ausdruck beschränkt sind, auf denen sie verwendet wird. Dies ist anders als das Schlüsselwort var, das eine Variable global oder lokal für eine gesamte Funktion unabhängig vom Blockbereich definiert.

Hier ist, wie es aussehen könnte:

for (let i = 0; i < files.length; i++) { 
    let file = files[i]; 
    let name = file.name; 
    let reader = new FileReader(); 

    reader.onload = function(e) { 
     var textObject = e.target.result.replace(/\r/g, "\n"); 
     var textHTML = e.target.result.replace(/\r/g, "<br/>"); 

     var text = e.target.result; 
     var p = document.createElement("p"); 
     p.innerHTML = textHTML; 
     $('#results').append(p);  
     localStorage.setItem('letter'+ i, JSON.stringify(textObject)); 
    }; 

    reader.readAsText(file, 'ISO-8859-1'); 
}