HTML5 Javascript文件阅读器-将数据提取到父函数中

查看HTML文件阅读器。我正在努力从fileReader中提取数据。我看到的所有示例都直接使用内置FileReader函数中的数据。我试图从filereader中提取数据并将其存储在父“类”中。然而，我一直不成功

function constructTS(name){
    // Variables 
    this.name = name;
    this.csv = "";

}

constructTS.prototype.load = function(files){

    if (window.FileReader) {
        // FileReader are supported.
        var reader = new FileReader();               //Exe#1

        reader.onload = function(e){                 //Exe#2

            var csv = reader.result                  //Exe#5
            var allTextLines = csv.split(/\r\n|\n/); //Exe#6
            var lines = [];                          //Exe#7
            while (allTextLines.length) {            
                lines.push(allTextLines.shift().split(','));
            };                                       //Exe#8
            this.lines = lines;                      //Exe#9


            };

        var x = reader.readAsText(files);            //Exe#3

    } else {
        alert('FileReader yeah.. browser issues.');
    };

    alert(reader.lines[0]);                          //Exe#4
};

---

this in

this.lines=行

引用Filereader类，而不是constructTS类。因此，不存储该信息。我还发现它运行整个函数，然后只读取文件有点奇怪。我想这对web功能很有帮助。知道如何将数据加载到类中吗？

在JavaScript

中，此

引用了闭包上下文：

这是
读取器中的
。onload
是
onload
方法的上下文，因此
读取器

在你的情况下：

function constructTS(name){
    // Variables 
    this.name = name;
    this.csv = "";

}

constructTS.prototype.load = function(files){
    var that = this; //keep a reference on the current context
    if (window.FileReader) {
        // FileReader are supported.
        var reader = new FileReader();               //Exe#1

        reader.onload = function(e){                 //Exe#2

            var csv = reader.result                  //Exe#5
            var allTextLines = csv.split(/\r\n|\n/); //Exe#6
            var lines = [];                          //Exe#7
            while (allTextLines.length) {            
                lines.push(allTextLines.shift().split(','));
            };                                       //Exe#8
            that.lines = lines;                      //Exe#9
        };

        var x = reader.readAsText(files);            //Exe#3

    } else {
        alert('FileReader yeah.. browser issues.');
    };

    alert(reader.lines[0]);                          //Exe#4
};

要理解JavaScript中的
这个
，有很多参考资料，比如JavaScript中的这个
引用了闭包上下文：
这是
读取器中的
。onload
是
onload
方法的上下文，因此
读取器

在你的情况下：

function constructTS(name){
    // Variables 
    this.name = name;
    this.csv = "";

}

constructTS.prototype.load = function(files){
    var that = this; //keep a reference on the current context
    if (window.FileReader) {
        // FileReader are supported.
        var reader = new FileReader();               //Exe#1

        reader.onload = function(e){                 //Exe#2

            var csv = reader.result                  //Exe#5
            var allTextLines = csv.split(/\r\n|\n/); //Exe#6
            var lines = [];                          //Exe#7
            while (allTextLines.length) {            
                lines.push(allTextLines.shift().split(','));
            };                                       //Exe#8
            that.lines = lines;                      //Exe#9
        };

        var x = reader.readAsText(files);            //Exe#3

    } else {
        alert('FileReader yeah.. browser issues.');
    };

    alert(reader.lines[0]);                          //Exe#4
};

要理解JavaScript中的
这个
，有很多参考资料，比如
这个
在这里指的是您未命名的回调函数。尝试以下模式：

var outer = this;
reader.onload = function(e){
    ...
    outer.lines = lines;
}
// you can use outer.lines or this.lines here now (they're the same)

此
引用此处未命名的回调函数。尝试以下模式：

var outer = this;
reader.onload = function(e){
    ...
    outer.lines = lines;
}
// you can use outer.lines or this.lines here now (they're the same)