2013-06-04 1 views
0

아래 코드는 현재 가지고있는 코드입니다. onload 외부에서 (reader.result) 경고하고 싶지만 항상 null을 반환합니다. readAsText()가 이라고 호출되고 결과가 끝나면 reader.result가 결과를 유지해야합니까?JavaScript - onload 외부에서 reader.result 가져 오기

더 구체적으로 말해, 최종 목표는 파일 내의 텍스트를 읽고 나중에 사용할 수 있도록 변수에 저장하는 것입니다. 나는 방금 디버깅 도구로 경고를 사용 해왔다.

<input type="file" id="fileinput" /> 
<script type = "text/javascript" id="00"> 
    var contents = []; 
    function readAFile(evt) 
    { 
     var reader = new FileReader(); 
     var test 
     var file = evt.target.files[0]; 

     if (file) 
     { 

      reader.onload = function (element) { 
       alert("in onload"); 
       this.result = element.target.result; 
       alert(reader.result); 
      }; 
      reader.onerror = function (element) { 
       alert("reader.onerror called - could not load"); 
      }; 

      reader.readAsText(file); 
      alert(reader.result); 

     } 
     else 
     { 
      alert("if(file) returned false - could not load"); 
     } 

    } 

    document.getElementById('fileinput').addEventListener('change', readAFile, false); 
+0

을 FileReader는 비동기입니다. 그래서 당신은'alert()'함수를 호출하기 전에 이것을 호출합니다. – Barmar

+0

@Barmar 그게 처음 엔 생각했지만, null을 반환하는 경고 (reader.result)는 onload (실제 결과를 반환 함) 내의 경고 (reader.result) 이후에 나타납니다. 내가 알기에 경고는 동기식이므로 읽기가 제 시간에 끝났음을 확인합니다. – user2453500

+0

먼저 Chrome에서 빈 경고를받습니다. http://jsfiddle.net/barmar/PkGH4/1/ – Barmar

답변

0
<!DOCTYPE html> 
<html> 

<input type="file" id="files" name="file" /> 
<div id="container" style="height: 500px; min-width: 500px"></div> 

<script> 
function handleFileSelect(evt) 
{ 
    var files = evt.target.files; // FileList object 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) 
    { 

     var reader = new FileReader(); 
     reader.onload = (function(reader) 
     { 
      return function() 
      { 
       var contents = reader.result; 
       var lines = contents.split('\n'); 
       ////// 
       document.getElementById('container').innerHTML=contents; 
      } 
     })(reader); 

     reader.readAsText(f); 
    } 
} 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
</script> 
</html>