for循環中的問題，只得到最後一個項目

Question

我正在使用fileReader讀取所有選定文件的內容。在使用fileReader API讀取它們之後，我將內容附加到DOM。這是完美的。 它爲每個文件創建一個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作爲參數。

(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

也有另一種解決方案，如果你可以用let

讓你可以定義在範圍上僅限於該塊，聲明，或在其上使用表達式中的變量。這與var關鍵字不同，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'); 
}