Javascript 在for循环中发出，仅获取最后一项

我正在使用fileReader读取所有选定文件的内容。在使用FileReaderAPI读取它们之后，我将内容附加到DOM中。那很好用。 它为每个文件创建一个p元素

现在，我想将每个文件内容也存储到本地存储。不幸的是，它只存储最后一项。出什么事了？谢谢你的提示

JS

$（“输入[name='uploadFile[]']”）。在（“更改”，函数（）上）{
var files=！！this.files？this.files:[]；
如果（！files.length | |！window.FileReader）
返回；
对于（var i=0；i”）；
var text=e.target.result；
var p=document.createElement（“p”）；
p、 innerHTML=textHTML；
$（“#结果”）。追加（p）；
setItem（'letter'+i，JSON.stringify（textObject））；
};
reader.readAsText（文件“ISO-8859-1”）；
})（文件[i]）；
}
});

问题在于，在触发

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

（函数（文件、索引）{
var name=file.name；
var reader=new FileReader（）；
reader.onload=函数（e）{
var textObject=event.target.result.replace（/\r/g，“\n”）；
var textHTML=event.target.result.replace（/\r/g，“
”）；
var text=e.target.result；
var p=document.createElement（“p”）；
p、 innerHTML=textHTML；
$（“#结果”）。追加（p）；
setItem（'letter'+index，JSON.stringify（textObject））；
};
reader.readAsText（文件“ISO-8859-1”）；
})（文件[i]，i）；

如果您可以使用

let

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

for（设i=0；i”）；
var text=e.target.result；
var p=document.createElement（“p”）；
p、 innerHTML=textHTML；
$（“#结果”）。追加（p）；
setItem（'letter'+i，JSON.stringify（textObject））；
};
reader.readAsText（文件“ISO-8859-1”）；
}

太棒了！非常感谢你

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