javascript - 如何让 JavaScript 回调工作

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 。但您应该注意，文件的加载顺序可能与数组中的顺序不同。