Question

＆＃13;

 $(function () {
                var csv = $("#fileUpload").val();
          
                $("#upload").bind("click", function () {
                    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
                    if (regex.test($("#fileUpload").val().toLowerCase())) {
                        if (typeof (FileReader) != "undefined") {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                var table = $("<table />");
                                var rows = e.target.result.split("\n");
                                for (var i = 0; i < rows.length; i++) {
                                    var row = $("<tr />");
                                    var cells = rows[i].split(",");
                                    for (var j = 0; j < cells.length; j++) {
                                        var cell = $("<td />");
                                        cell.html(cells[j]);
                                        row.append(cell);
                                    }
                                    table.append(row);
                                }
                                $("#dvCSV").html('');
                                $("#dvCSV").append(table);
                            }
                            reader.readAsText($("#fileUpload")[0].files[0]);
                        } else {
                            alert("This browser does not support HTML5.");
                        }
                    } else {
                        alert("Please upload a valid CSV file.");
                    }
                });
               
            });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <input type="file" id="fileUpload" name="fileUpload" />
   <input type="button" id="upload" value="Upload" name="upload"/>
   <hr />
   <div id="dvCSV"></div>

＆＃13;

在上面的代码中我需要使用jquery.how将上传的csv文件转换为json格式来执行此操作？并创建json格式应该作为json文件下载。请帮助我如何做到这一点

Answer 1

这是你想要的功能：

$(function () {
    var csv = $("#fileUpload").val();

    $("#upload").bind("click", function () {
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test($("#fileUpload").val().toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var rows = e.target.result.split("\r\n");

                    if(rows.length>0){
                        var firstRowCells = GetCSVCells(rows[0], ",");

                        var dataArray = new Array();
                        for(var i=1;i<rows.length;i++)
                        {
                            var cells = GetCSVCells(rows[i], ",");
                            var obj = {};
                            for(var j=0;j<cells.length;j++)
                            {
                                obj[firstRowCells[j]] = cells[j];
                            }
                            dataArray.push(obj);
                        }

                        $("#dvCSV").html('');
                        $("#dvCSV").append(JSON.stringify(dataArray));
                    }
                }
                reader.readAsText($("#fileUpload")[0].files[0]);
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid CSV file.");
        }
    });
});

function GetCSVCells(row, separator){
    return row.split(separator);
}

它将CSV内容转换为一个对象数组，其中从第一行（标题行）读取属性，然后将其“转换”为JSON字符串。

如何使用jquery将csv文件转换为json并下载该json文件

1 个答案: