使用Javascript将CSV文件读入键值对数组 [英] Read CSV file with Javascript into a key value pair array

问题描述

有很多使用jQuery读取CSV文件的例子，但javascript示例很少见。

There are plenty of examples of reading a CSV file using jQuery however javascript examples are few and far between.

由于我正在为特定应用程序使用内部脚本编辑器，因此我仅限于使用Javascript。

As i am using an internal script editor for a particular application, i am limited to using Javascript only.

我有一个csv文件，其标题后跟每行数据。

I have a csv file that has headings followed by data in each row.

Heading1,Heading2,Heading3,Heading4
row1data1,row1data2,row1data3,row1data4
row2data1,row2data2,row2data3,row2data4

使用的分隔符是，但是可能还有其他分隔符，例如 ^ 。

The delimiter being used is , however there could be others e.g. ^.

由于我无法上传文件，我可以选择手动引用绝对路径。

As i can't upload a file, i have the option to manually reference an absolute path.

有没有办法我只能使用javascript来读取csv文件？

Is there a way i can use only javascript to read a csv file?

推荐答案

首先，这里有两种方法用javascript读取文件

As a start, here is a couple of ways to read a file with javascript

HttpRequest :(来自网络服务器或绝对路径）

HttpRequest: (from web server or absolute path)

来源： Javascript - 读取本地文本文件

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

使用绝对路径时在文件名中指定file：//

And specify file:// in your filename when using an absolute path

readTextFile("file:///C:/your/path/to/file.txt");

FileReader API：

FileReader API:

来源：< br>
- http://codepen.io/matt-west/pen/KjEHg

- http： //blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

HTML

<div id="page-wrapper">

    <h1>Text File Reader</h1>
    <div>
        Select a text file: 
        <input type="file" id="fileInput">
    </div>
    <pre id="fileDisplayArea"><pre>

</div>

JS

window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var textType = /text.*/;

        if (file.type.match(textType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerText = reader.result;
            }

            reader.readAsText(file);    
        } else {
            fileDisplayArea.innerText = "File not supported!"
        }
    });
}

MS Windows上的JS（简单样本）

JS on MS Windows (simple sample)

资料来源： http： //msdn.microsoft.com/en-us/library/czxefwt8(v=vs.84).aspx

function ReadFiles()
{
   var fso, f1, ts, s;
   var ForReading = 1;
   fso = new ActiveXObject("Scripting.FileSystemObject");
   ts = fso.OpenTextFile("c:\\testfile.txt", ForReading);
   s = ts.ReadLine();
   // s holds the text content
   ts.Close();
}

这篇关于使用Javascript将CSV文件读入键值对数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！