forループで問題が発生した場合は、最後の項目だけを取得します。

Question

fileReaderを使用して、選択したすべてのファイルの内容を読み込みます。 fileReader APIでそれらを読み取った後、DOMにコンテンツを追加します。それは完全に機能します。 ファイルごとに1つのp要素を作成します。

今、ローカルのストレージに各ファイルのコンテンツも保存したいと考えています。残念ながら、最後の項目のみを保存します。何がうまくいかない？あなたのヒントをありがとう。

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

問題はonloadが発射された時点で、iがループによって変更されている、ということです。つまり、localStorage.setItem('letter'+ iは常に配列の最後の要素を参照します。実際には、直ちに呼び出される関数式である正しい修正が実際にはありますが、パラメータとしてiも追加する必要があります。あなたはそれが使用されているブロック、声明、または式の範囲に限定されている変数を宣言することができますlet

レットを使用することができるかどう

(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

は、別の解決策があります。これは、変数をグローバルに定義するvarキーワードとは異なり、ブロックスコープに関係なく関数全体に対してローカルに定義されます。

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'); 
}