HTML5 Javascript FileReader - 부모 함수로 데이터 추출

Question

HTML FileReader를 봅니다. fileReader에서 데이터를 추출하는 데 어려움을 겪고 있습니다. 내가 본 모든 예제는 inbuilt 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.lines = lines;의 this는 constructor 클래스가 아니라 Filereader 클래스를 나타냅니다. 따라서 정보는 저장되지 않습니다. 또한 전체 기능을 실행하는 방법을 조금 이상하게 생각한 다음 나중에 파일을 읽는 것뿐입니다. 나는 그것이 웹 기능에 도움이된다고 생각합니다. 어떻게 데이터를 클래스에로드 할 수 있습니까? 자바 스크립트 this에서

Answer 1

는 폐쇄 컨텍스트를 참조하십시오 reader.onload에 this이 onload 방법의 문맥, 그래서 reader입니다. 상황에

:

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을 이해하려면, https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

Answer 2

this 여기에 당신의 이름이 콜백 함수를 의미처럼, 많은 자원이있다. 다음 패턴을 사용해보십시오.

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