HTML5 FileReader如何返回结果？ [英] HTML5 FileReader how to return result?

问题描述

我使用JS FileReader，我需要在文件读取操作后获取结果并使用此数据进行操作。 FileReader是异步读取的，我不知道，当结果准备使用。如何做到这一点？

  $（document）.ready（function（）{
 $（'＃file_input' ）.on（'change'，function（e）{
 var res = readFile（this.files [0]）; 
 
 //我的一些操作使用res 
 
 $（'＃output_field'）。text（res）; 
}）; 
}）; 
 
函数readFile（file）{
 var reader = new FileReader（），
 result ='empty'; 
 
 reader.onload = function（e）
 {
 result = e.target.result; 
}; 
 
 reader.readAsText（file）; 
 
 //等到结果为空？ 
 
返回结果; 
} 
  

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

显示空。

如何等到结果为空？
另一种方式？

解决方案

异步阅读 。您需要提供一个自定义的 onload 回调函数，它定义了读取完成后应该发生的事情：

 < （'change'，function（e）{
 readFile（this.files [0]）; code> $（document）.ready（function（）{
 $（'＃file_input' ]，函数（e）{
 //在回调中使用结果... 
 $（'＃output_field'）.text（e.target.result）; 
}）; 
}）; 
}）; 
 
函数readFile（file，onLoadCallback）{
 var reader = new FileReader（）; 
 reader.onload = onLoadCallback; 
 reader.readAsText（file）; 
} 
  

（请参阅 readFile 不会返回一个值。相反，它接受一个回调函数，只要读取完成就会触发。 $（'＃output_field'）。text 操作被移入回调函数。这可以确保只有读者的 onload 回调触发时才会运行该操作，当 e.target.result 将被填充时。

使用回调编程起初有点难，但是它对于实现高级功能是绝对必要的。

I use JS FileReader and me need take result after file read operation and manipulate with this data. FileReader is read asynchronously and i don't know, when result is ready to use. How to do this?

$(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/

It's show "empty".

How to wait until "result" is empty? Another way?

解决方案

Reading happens asynchronously. You need to provide a custom onload callback that defines what should happen when the read completes:

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

(See the Fiddle.)

Note that readFile does not return a value.  Instead, it accepts a callback function, which will fire whenever the read is done. The $('#output_field').text operation is moved into the callback function. This ensures that that operation will not run until the reader's onload callback fires, when e.target.result will be filled.

Programming with callbacks is a bit difficult to get right at first, but it is absolutely necessary for implementing advanced functionality.

这篇关于HTML5 FileReader如何返回结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！