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

问题是，在cacheThisData()被触发时，onload已被循环更改。这意味着i将始终引用数组中的最后一个元素。您实际上已经有了正确的修复 - 即时调用的函数表达式 - 但您还需要添加localStorage.setItem('letter'+ 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');
}

for循环中的问题，只获取最后一项

2 个答案: