HTML5 FileReader如何返回结果？

Question

我使用JS FileReader.我希望在文件读取操作后获得结果并使用此数据.FileReader是异步的,我不知道结果何时准备就绪.如何正确完成？

$(document).ready(function(){
    $('#file_input').on('change', function(e){
        var res = readFile(this.files[0]);

        //my some manipulate with res

        $('#output_field').text(res);
    });
});

function readFile(file){
    var reader = new FileReader(),
        result = 'empty';

    reader.onload = function(e)
    {
        result = e.target.result;
    };

    reader.readAsText(file);

    //waiting until result is empty?

    return result;
}

http://jsfiddle.net/ub22m/4/

它显示"空".

如何等到"结果"为空？其他方式？

Answer 1

读取是异步发生的.您需要提供一个自定义onload回调函数,用于定义读取完成时应执行的操作:

$(document).ready(function(){
    $('#file_input').on('change', function(e){
        readFile(this.files[0], function(e) {
            // use result in callback...
            $('#output_field').text(e.target.result);
        });
    });
});

function readFile(file, onLoadCallback){
    var reader = new FileReader();
    reader.onload = onLoadCallback;
    reader.readAsText(file);
}

(见小提琴.)

请注意,readFile不会返回值.相反,它接受一个回调函数,只要读取完成就会触发.该$('#output_field').text操作被移入回调函数.这样可以确保在读取器的onload回调触发之前该操作不会运行,何时e.target.result将被填充.

使用回调进行编程起初有点难以正确使用,但它对于实现高级功能是绝对必要的.

Answer 2

使用 Promise 包装 FileReader ，然后使用await获取结果：

https://blog.shovonhasan.com/using-promises-with-filereader/