javascript 및 jquery를 사용하여 csv 파일을 읽고 처리하는 방법은 무엇입니까?

Question

나는 다음과 같은 HTML 태그로 찾아보기 버튼을 사용하여 CSV 파일 읽기 시도하고 문제 강타하고 : 읽기 및 입력 파일을 처리 할

<input type="file" name="filename" id="filename"> 
<div id="csvimporthint"></div> 

내 jQuery 코드는 다음과 같습니다 :

<script> 
$("#filename").change(function(e) { 
    var ext = $("input#filename").val().split(".").pop().toLowerCase(); 

    if($.inArray(ext, ["csv"]) == -1) { 
    alert('Upload CSV'); 
    return false; 
    } 

    if (e.target.files != undefined) { 
     var reader = new FileReader(); 
     var csvLines; 
     var csvValues; 
     var i; 

     reader.onload = function(e) { 
      csvLines = e.target.result.split("\n"); 
      for(i=1; i<csvLines.length; i++){ 
       csvValues = csvLines[i].split(","); 
       importedLat = csvValues[0];     
       importedLon = csvValues[1]; 
       markerFunc(importedLat, importedLon); 
       addLayer(); 
      } 
      //$("#csvimporthint").html(importedLat + " " + importedLon); 
      reader.readAsText(e.target.files.item(0)); 
     }; 
    } 
    return false; 
}); 
</script> 

내가 직면 한 문제는 내 reader.onload가 실행되지 않아 결과적으로 파일 데이터를 처리 할 수 ​​없다는 것입니다. 이 코드를 실행할 수있는 솔루션을 찾도록 도와주십시오.

P.S : http://jsfiddle.net/W8fME/1650/

Answer 1

나는이 질문에 자신의 답을 발견했다 :이 위의 코드를 작성하려면, 나는이 링크를 따라 갔다. 문제는 스크립트 태그의 jquery 코드에서 올바른 jquery 코드는 다음과 같습니다.

<script> 
$("#filename").change(function(e) { 
    var ext = $("input#filename").val().split(".").pop().toLowerCase(); 

    if($.inArray(ext, ["csv"]) == -1) { 
    alert('Upload CSV'); 
    return false; 
    } 

    if (e.target.files != undefined) { 
     var reader = new FileReader(); 
     var csvLines; 
     var csvValues; 
     var i; 

     reader.onload = function(e) { 
      csvLines = e.target.result.split("\n"); 
      for(i=1; i<csvLines.length; i++){ 
       csvValues = csvLines[i].split(","); 
       importedLat = csvValues[0];     
       importedLon = csvValues[1]; 
       markerFunc(importedLat, importedLon); 
       addLayer(); 
      } 
     }; 
     reader.readAsText(e.target.files.item(0)); 
    } 
    return false; 
}); 
</script>