将csv文件输入提供给ajax url以显示在html表上

Question

我试图通过input type="file"提供用户选择的csv文件，并使用JQuery的$.ajax()读取它，然后将其显示到一个空的html表中。 由于某种原因，它无法看到html的文件选择器选择的文件。

我被困在这一部分，不知道如何获取路径，或者是否必须提供x.csv文件的路径。 我做了一些研究，发现了有关this.files[0]['mozFullPath']但似乎只有在使用Mozilla Firefox时才适用。

是否有更好或正确的方法来解决我的问题？

$('#csv_file_input').on('change', function () {
    var fileInput = $('#csv_file_input')[0].files[0].name;
    console.log(fileInput);
    $.ajax({
        url: fileInput, //404 not found
        dataType: "text",
        success: function (data) {
            var employee_data = data.split(/\r?\n|\r/);
            var table_data = '<table class="table table-bordered table-striped">';
            for (var count = 0; count < employee_data.length; count++) {
                var cell_data = employee_data[count].split(",");
                table_data += '<tr>';
                for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
                    if (count === 0) {
                        table_data += '<th>' + cell_data[cell_count] + '</th>';
                    }
                    else {
                        table_data += '<td>' + cell_data[cell_count] + '</td>';
                    }
                }
                table_data += '</tr>';
            }
            table_data += '</table>';
            $('#data_preview').html(table_data);
        }
    });
});

我更喜欢在不使用其他库的情况下实现这一目标。 我在$.ajax()块的url部分上找不到404 ，我怀疑是因为所选文件的路径读取错误或路径丢失。

我将不胜感激任何帮助或建议。

谢谢。

Answer 1

经过研究，我得以解决。 我意识到没有必要使用JQuery的$.ajax() 。 以下是我的解决方案，我希望这将对遇到相同问题的其他人有所帮助。

$('#csv_file_input').on('change', function (e) {
    var ext = $("#csv_file_input").val().split(".").pop().toLowerCase(); //csv
    if (e.target.files != undefined) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var csvval = e.target.result.split("\n");
            var jsonObj = [];
            var headers  = csvval[0].split(",");
            for(var i = 1; i <csvval.length; i++){
                var data = csvval[i].split(',');
                var obj = {};
                for(var j = 0; j < data.length; j++) {
                    obj[headers[j].trim()] = data[j].trim();
                }
                jsonObj.push(obj);
            }
            var jsonData = JSON.stringify(jsonObj);
            addDataToTable(jsonData);
        };
        reader.readAsText(e.target.files.item(0));
    }
    return false;
});

function addDataToTable(jsonObjArr){
    var json = JSON.parse(jsonObjArr);
    console.log(json);
    console.log(typeof json);
    var tbl = $("#data_preview");
    for(var i = 0; i < json.length-1; i++){
        var studentId = json[i]['studentId'];
        var firstName = json[i]['firstname'];
        var lastName = json[i]['lastname'];
        var middle = json[i]['middle'];
        tbl.append(
            "<tr><td>" + studentId + "</td>" +
            "<td>" + firstName + "</td>" +
            "<td>" + lastName + "</td>" +
            "<td>" + middle + "</td>" +
            "</tr>"
        );
    }
}