HTML5 Javascript FileReader - extrahieren Daten in übergeordnete Funktion

Question

Blick auf HTML FileReader. Ich habe Mühe, die Daten aus dem FileReader zu extrahieren. Alle Beispiele, die ich sehe, verwenden die Daten direkt aus der eingebauten FileReader-Funktion. Ich versuche, die Daten aus dem Dateireader zu ziehen und in der übergeordneten 'Klasse' zu speichern. Aber ich war erfolglos.

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 
}; 

Das dies in this.lines = lines; bezieht sich auf die Filereader-Klasse und die constructTS Klasse nicht. Somit wird die Information nicht gespeichert. Ich finde es auch ein bisschen komisch, wie es die ganze Funktion ausführt und dann erst die Datei einliest. Ich denke, das ist hilfreich für die Web-Funktionalität. Irgendeine Idee wie ich die Daten in die Klasse laden kann?

Answer 1

In JavaScript this verweist auf die Schließung Kontext: this im reader.onload ist der Kontext der onload Methode, so reader.

In Ihrer 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 
}; 

this in JavaScript zu verstehen, gibt es eine Menge von Ressourcen, wie https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

Answer 2

this bezieht sich auf Ihre unbenannte Callback-Funktion hier. Versuchen Sie dieses Muster:

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