FileReader 输出保存到数组答案

【问题标题】：FileReader output saved to ArrayFileReader 输出保存到数组
【发布时间】：2016-07-01 11:50:20
【问题描述】：

我想问你，是否可以遍历文件输入列表并将结果保存在一个数组中。这是我的代码。如果有帮助，我也会使用 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]);
 }
}

当我运行此代码时，我得到“未定义”。你们有任何想法如何实现这一目标吗？谢谢你

【问题讨论】：

你会为此提供jsfiddle吗...
也许你的for循环是在readFile函数执行之前执行的？如果没有，如果读取文件有问题，您可以使用FR.error进行调试。
readFile函数什么时候调用？
不，这不是问题所在。在代码中，有一个事件，我调用 readFile()，然后创建一个循环。但是我想在这里简短，所以我跳过了它

标签： javascript arrays angularjs filereader

【解决方案1】：

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

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

【讨论】：

对不起我的愚蠢错误。这工作恰到好处:)谢谢你

【解决方案2】：

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

【讨论】：