FileReader 输出保存到数组

Question

我想问你，是否可以遍历文件输入列表并将结果保存在一个数组中。这是我的一些代码。如果有帮助，我也会使用 AngularJS...

HTML

        <input type="file" id="file1">
        <input type="file" id="file2">
        <button id="saveBtn">Save</button>

JAVASCRIPT

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'), document.getElementById('file2')];

function readFile() {
    for (var i = 0; i < inputs.length(); i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results[i] = event.target.result; //array where I would like to store results
            };
            FR.readAsDataURL(inputs[0].files[0]);
        }
    }
}
//here I would like to write down all results
var btn = document.getElementById('saveBtn');
btn.onclick = function() {
readFile();
for(var i=0; i < inputs.length(); i++) {
   console.log(results[i]);
 }
}

当我运行这个代码时，结果我得到'undefined'。你们有什么想法如何实现这一目标？谢谢

Answer 1

onLoad 在 FileReader 加载时执行，因此在您编写日志语句之后。

试试这个： https://jsfiddle.net/s17Lmc21/1/

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'),     document.getElementById('file2')];

function readFile() {
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results[i] = event.target.result; //array where I would like     to store results
                console.log(results[i]);
            };
            FR.readAsDataURL(inputs[0].files[0]);
        }
    }
}
//here I would like to write down all results
var btn = document.getElementById('saveBtn');
btn.onclick = function() {
readFile();
}

Answer 2

除了 Niek Vandael 在他的回答中提出的观点之外；事实上，您试图在信息完成加载之前显示信息，您的代码还存在一些其他问题。

input.lengths()

应该是

input.lengths

lengths 这不是一种方法。当我测试代码（在 Chrome 中）时，这会导致错误。

你也一遍又一遍地阅读相同的数据；

FR.readAsDataURL(inputs[0].files[0]);

应该是

FR.readAsDataURL(inputs[i].files[0]);

所以，这是另一种看法。我添加了几个变量来跟踪已加载的项目以及要加载的项目数量，然后在加载后调用该函数来显示数据。

results = []; // array for storing results
/*file inputs*/
inputs = [document.getElementById('file1'), document.getElementById('file2')];

//here I would like to write down all results
var btn = document.getElementById('saveBtn');
var inputCount;
var filesLoaded = 0;

function readFile() {
    inputCount = Number(inputs.length);
    for (var i = 0; i < inputCount ; i++) {
        if (inputs[i].files && inputs[i].files[0]) {
            var FR = new FileReader();
            FR.onload = function (event) {
                results.push(event.target.result); //array where I would like to store results
                filesLoaded++;
                if (filesLoaded == inputCount) {
                    showResult();
                }
            };
            FR.readAsDataURL(inputs[i].files[0]);
        }
    }
}

btn.onclick = function () {
    readFile();
}

function showResult() {
    for (var i = 0; i < inputs.length ; i++) {
        console.log(results[i]);
    }
}

还有一些事情需要考虑，例如验证是否已选择文件等，但我想这有点超出了这里的范围。

FileReader 输出保存到数组

FileReader output saved to Array

javascript

arrays

filereader

angularjs