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

当我运行此代码时，结果我得到了“未定义”＃39; 你们有任何想法如何实现这一点？谢谢

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

长度它不是一种方法。当我测试代码时（在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输出保存到Array

2 个答案: