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

我试图通过

input type=“file”

并使用JQuery的

$.ajax（）

读取它，然后将其显示到一个空的html表中。由于某些原因，它无法查看html的文件选择器选择的文件

我被这部分卡住了，不知道如何获取路径，也不知道是否必须提供x.csv文件的路径。我做了一些研究，发现了

这个.files[0]['mozzullpath']

，但似乎只有在使用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);
        }
    });
});

$（'csv#file_input'）。打开（'change'，函数（）{
var fileInput=$（'#csv_file_input'）[0]。文件[0]。名称；
log（fileInput）；
$.ajax({
url:fileInput，//404未找到
数据类型：“文本”，
成功：功能（数据）{
var employee_data=data.split（/\r？\n | \r/）；
var表_数据=“”；
对于（var count=0；count

我更喜欢在不使用其他库的情况下实现这一点。 在

$.ajax（）

块的

url

部分，我发现404未找到，我怀疑这是因为所选文件的路径读取错误或路径丢失

如果有任何帮助或建议，我将不胜感激

---

谢谢。

我在做了研究之后才解决了这个问题。我意识到没有必要使用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>"
        );
    }
}

$（'csv#file_input'）。关于（'change'，函数（e）{
var ext=$（“#csv#u file_input”）.val（）.split（“.”.pop（）.toLowerCase（）；//csv
如果（e.target.files！=未定义）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var csvval=e.target.result.split（“\n”）；
var jsonObj=[]；
var headers=csvval[0]。拆分（“，”；
对于（var i=1；我可以提供帮助