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