[英]HTML5 Javascript FileReader - extract data into parent function
Looking at HTML FileReader. 查看HTML FileReader。 I am struggling to extract the data from the fileReader. 我正在努力从fileReader中提取数据。 All examples I see use the data directly from the inbuilt FileReader function. 我看到的所有示例都直接使用内置FileReader函数中的数据。 I'm trying to pull the data out of the filereader and store it in the parent 'class'. 我正在尝试将数据从文件读取器中提取出来并将其存储在父级“类”中。 However I have been unsuccessful. 但是,我一直没有成功。
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
};
The this in this.lines = lines;
this.lines = lines;
中的this.lines = lines;
refers to the Filereader class and not the constructTS class. 引用Filereader类,而不是ConstructTS类。 Thus the information is not stored. 因此,该信息不被存储。 I also find it a little strange how it runs the entire function and then only reads in the file afterwards. 我还发现它如何运行整个功能并随后仅读取文件有点奇怪。 I guess that is helpful for web functionality. 我想这对Web功能很有帮助。 Any idea how I can load the data into the class? 知道如何将数据加载到类中吗?
In JavaScript this
references the closure context: this
in the reader.onload
is the context of the onload
method, so reader
. 在JavaScript中this
引用关闭背景: this
在reader.onload
是上下文onload
方法,使reader
。
In your situation : 在您的情况下:
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
};
To understand this
in JavaScript, there's a lot of resources, like https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this 要在JavaScript中理解this
,有很多资源,例如https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this
this
refers to your unnamed callback function here. this
是指此处未命名的回调函数。 Try this pattern: 试试这个模式:
var outer = this;
reader.onload = function(e){
...
outer.lines = lines;
}
// you can use outer.lines or this.lines here now (they're the same)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.