2013-06-05 1 views
17

사용자가 제공 한 일부 csv 파일을 읽어야합니다. 파일은 다음과 같이 파일 드롭을 처리하는 드래그 앤 드롭 DIV, 사용하여 페이지/스크립트에 전달됩니다FileReader로드 이벤트에 매개 변수 전달

function handleFileDrop(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    var files = evt.dataTransfer.files; // FileList object. 
    ... 
} 

내가 배열로 변환하는 CSV 라이브러리에 각 파일을 구문 분석 할 필요를, 또한 I 현재 구문 분석하고있는 파일 이름을 추적해야합니다. 여기에 각 파일을 구문 분석하는 데 사용하는 코드입니다 :이 때까지

for(var x = 0; x < files.length; x++){ 
    var currFile = files[x]; 
    var fileName = currFile.name; 
    var reader = new FileReader(); 
    reader.onload = (function(theFile){ 
     return function(e){ 
      var csvArr = CSV.csvToArray(e.target.result, ";", true); 
      console.log(csvArr); 
     }; 
    })(currFile); 
    reader.readAsText(currFile); 
} 

을, 모든 것이 잘 작동합니다.

reader.onload = (function(theFile){ 
    return function(e){ 

     ***** I need to have fileName value HERE ***** 

    }; 
})(currFile); 

가 가능 : 내가 필요한 것은 예를 들어, 또한 reader.onload 이벤트에 파일 이름을 전달하는 것입니다? 어떻게해야합니까? 어떤 도움에 미리 감사드립니다, 안부

답변

43

는 다음을 시도해보십시오

var reader = new FileReader(); 
reader.onload = (function(theFile){ 
    var fileName = theFile.name; 
    return function(e){ 
     console.log(fileName); 
     console.log(e.target.result); 
    }; 
})(currFile); 
reader.readAsText(currFile); 

를 여기, 당신이 파일이 외부 메소드에 전달되는 새로운 fileName 변수마다 만드는. 그런 다음 해당 변수에 액세스하고 (클로저로 인해) 반환하는 함수를 만듭니다.

+0

Genius! 고마워, 나는 이것을하기 위해 내 머리카락을 꺼내려고했다. 나는 지금 폐쇄를 이해하기 시작하고 있다고 생각한다! – Fiver

+2

파일 이름과 reader.result 값을 모두 얻는 방법은 무엇입니까? – PatriceG

+0

코드를 따르는 데 문제가 있습니다. 'theFile'은 어디에서 오는 것입니까? currFile이 정의 된 곳을 볼 수는 있지만 'theFile'과 관련된 것은 무엇입니까? – NiallJG