在 html 中使用上传的 csv 文件答案

【问题标题】：Using uploaded csv file in html在 html 中使用上传的 csv 文件
【发布时间】：2015-03-06 04:47:54
【问题描述】：

我正在开发可以可视化 csv 文件中的数据的应用程序（作为学校项目）。我不知道上传后如何使用 csv 文件（我没有使用服务器，它只是离线应用程序）。对于使用 zing 图表的图表，请参见以下代码

var chartData={
"type": "line",`"csv":{
    "url":"input/datasample.csv",
  "vertical-labels":true,
    "smart-scales":true


 }

};

window.onload=function(){
  zingchart.render({
    id:'chartDiv',
    height:400,
    width:600,
    data:chartData
  });

`所以你可以看到使用的数据是手动设置的，我想做的是创建将使用我上传的 csv 文件（使用按钮）并将其用作数据源的函数..

我已经尝试过了，但我仍然不知道如何使用该 csv 作为数据源 ...

<input type="file" id="fileInput" accept=".csv"/>

                    <script>
                document.querySelector('#fileInput').addEventListener('change', handleFile,false)
                function handleFile(e){
    var reader = new FileReader;
    var file   = e.target.files[0]

    reader.onload = function(e){
        var csv = e.target.result

        }

    reader.readAsText(file);
}

我想我是否可以将 csv 转换为字符串或 json，但我不知道如何.. 任何帮助将不胜感激..我真的只是一个初学者

【问题讨论】：

标签： javascript php jquery html json

【解决方案1】：

在此处查看我的答案：[answer](Convert CSV data into JSON format using Javascript

function csvUpload(csvText){
    //Split all the text into seperate lines on new lines and carriage return feeds
    var allTextLines = csvText.split(/\r\n|\n/);
    //Split per line on tabs and commas
    var headers = allTextLines[0].split(/\t|,/);
    var lines = [];
    var locations = [];

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(/\t|,/);

        if (data.length == headers.length) {

        var location = {"device_id":data[0], "address":data[1], "city":data[2]};
        locations.push(location);

        }

    }
    return locations;
})

【讨论】：