JavaScript FileReader()和可能的返回或关闭问题 [英] JavaScript FileReader() and a possible return or closure issue

问题描述

最后，我的第一个问题是关于stackoverflow的.我可以向您保证，我已经搜索了相关的答案，但是没有人适合我的问题.我现在正在学习JavaScript，并且拥有.NET和C ++的背景知识，但是我无法让这段代码实现我所期望的.我在这里复制了许多版本中的一个，可能对return语句的位置提出了疑问，但是也许您可以帮我解决这个问题.

Finally, my first question here on stackoverflow. I can guarantee you that I have searched for related answers, but no one fits my problem. I am learning JavaScript now, having a background in .NET and C++, but I can't get this piece of code to do what I expect. I am copying here one of the many versions, with possible a questionable placement of the return statement, but maybe you can help me out with this.

function readFile(file) {                                                       
    var reader = new FileReader();
    reader.onload = readSuccess;                                            
    function readSuccess(evt) {                        
        var text = evt.target.result; 
        return text;                                      
    };
    reader.readAsText(file);                                  
} 

我在这里尝试的操作是，通过使用type ="file"输入的标记读取HTML中访问的文件. 直到那一部分，一切都在代码内顺利进行.我使用了Chrome控制台和Firebug，以将函数的返回捕获到控制台中的变量中，例如:

What I try here, is reading a file that is accesed in HTML via a tag input with type="file". Everything goes just well inside the code up to that part. I used Chrome Console and Firebug, to capture the return of the function into a variable in the Console, like:

var x = readFile(aFile);

我得到的是一条未定义"消息. 使用断点，我可以在return语句中看到文本内容并正确填充！但是文本没有返回！ 我已经看到了相关的问题，但是他们使用innerHTML和其他我不想在这里做的技巧解决了这个问题，因为该函数的结果应该由另一个JS函数使用，而不是更新任何JS函数. DOM的一部分.

And what I get is an 'undefined' message. Using breakpoints, I can see the text content in the return statement and it is correctly filled! But the text isn't returned! I've seen questions related, but they get around the problem using innerHTML and other kind of tricks that I do not want to do here, because the result of this function is supposed to be consumed by another JS function, and not to update any part of the DOM.

非常感谢您抽出宝贵的时间.

Thank you very much in advance for your time.

推荐答案

您将获得undefined，因为这是readFile(aFile)返回的内容(即什么也没有).就像事件监听器一样，有多种获取事件数据的方法，其中之一就是回调.这是将您的代码修改为使用其中一个的代码:

You are getting undefined because that's what readFile(aFile) returns (i.e. nothing). Just like with event listeners, there are various ways to get event data, one of them would be callbacks. Here's your code modified to use one:

function readFile(file, cb) {
    var reader = new FileReader();
    reader.onload = readSuccess;
    function readSuccess(evt) {
        cb(evt.target.result)
    };
    reader.readAsText(file);
}

var x;

readFile(aFile, function (data) {
    x = data;
});

我添加了函数作为readFile的第二个参数，当读取文件并传递了数据时将调用该函数.所有变量分配都应在回调内部完成.

I've added function as readFile's second argument, which will be called when the file is read with data passed into it. All variable assigning are to be done inside callback.

关于获得相似结果的其他方法，还有生成器，但是您可能应该首先了解JS异步基础知识.

As for other ways to achieve similar result, there are also promises and generators, but you probably should understand JS async basics first.

这篇关于JavaScript FileReader()和可能的返回或关闭问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！