Question

我最近开始学习Javascript，因为我来自Windows开发世界，我很难接受一些JS技术..

我正在尝试使用FileReader同时将多张图片加载到页面中。我知道我需要使用异步回调，但似乎我无法让它工作。

这是我的代码：

function loadFile(file, callback) {
    var reader = new FileReader();
    reader.onload = function(file) {
        var output = document.createElement('input');
        output.type = 'image';
        output.classList.add('image-responsive');
        output.src = reader.result;

        var x = document.getElementById('OrigName');
        x.appendChild(output);
    }
    loadFile(file, callback);

}

for (var i = 0; i < evt.target.files.length; i++) {
    var file = evt.target.files[i];
    loadFile(file);
}

有人可以帮我解决这个问题吗？

Answer 1

我认为你误解了回调是如何运作的。你可能想要更像这样的东西：

function loadFile(file, callback) {
    var reader = new FileReader();
    reader.onload = function(file) {
        var output = document.createElement('input');
        output.type = 'image';
        output.classList.add('image-responsive');
        output.src = reader.result;

        var x = document.getElementById('OrigName');
        x.appendChild(output);
        return callback(output);
    }

}

evt.target.files.forEach(function (file) {
    loadFile(file, function (output) {
        console.log(output);
    }); 
})

每个文件加载后，这将console.log输出。您应该注意，文件的加载顺序可能与数组中的顺序不同。

Answer 2

正如其他人所评论的那样，代码不正确，首先你要调用你的加载函数：

loadFile(file);

在for循环中而不指定回调。因此，当您想要使用它时，它将是未定义的。我假设应该发送另一个函数sendFile，这可能是回调。整体而言，代码需要一些工作。再考虑一下这个问题并重构代码，也许使用Jasmine编写一些单元测试来逐步构建代码。

如何让javascript回调工作

2 个答案: