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>

如何使用javascript和jquery读取和处理csv文件？

1 个答案: