如何使用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從未觸發過，因此無法處理文件數據。 請幫助我找到使此代碼運行的解決方案。

PS：要編寫以上代碼，我點擊了以下鏈接： http : //jsfiddle.net/W8fME/1650/

Answer 1

我自己找到了這個問題的答案。 問題出在script標記中的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>