使用 Javascript 将 CSV 文件读入键值对数组答案

【问题标题】：Read CSV file with Javascript into a key value pair array使用 Javascript 将 CSV 文件读入键值对数组
【发布时间】：2014-03-28 17:02:55
【问题描述】：

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

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

我有一个 csv 文件，其中每一行都有标题和数据。

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

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

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

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

【问题讨论】：

您是在问如何使用 javascript 读取文件吗？或者如何将 javascript 中的大字符串解析为 CSV？
您可以使用 ajax/text 获取 csv，然后用换行符分割它，然后用逗号
@Sajith Nair - 我不能使用 AJAX。我仅限于简单的 ol' javascript
@Alex Wayne - 我要求使用 javascript 读取文件的内容并将其内容放入键值数组中。
@A.K - 如果您查看您引用的 2 篇文章，它们使用 PHP、jQuery 或 AJAX，我都无法使用。

标签： javascript

【解决方案1】：

首先，这里有几种使用 javascript 读取文件的方法

HttpRequest：（来自网络服务器或绝对路径）

来源：Javascript - read local text file

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://

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

FileReader API：

来源：
- 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>

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（简单示例）

来源：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();
}

【讨论】：

@PellePenna - 对不起 PellePenna。该应用程序不支持 XMLHTTPRequest 或 HTML 和 JS 的组合。它需要是直接的 javascript。
我在底部更新了我的答案，如何在 Windows 计算机上使用它。您必须测试 UNC 路径是否有效。如果没有，您必须为路径分配一个字母，这当然可以对 ip 和本地网络计算机进行
@PellePenna - 感谢 PellePenna。你给出的最后一个例子就像一个魅力
对于读取许多文件很有用，例如 html 和 txt，但使用 csv 会出现“不支持文件！”...问题特别提到了 csv。我是对的还是我错过了什么？
所有“文本”文件都应该，但二进制文件可能不会（虽然没有尝试过），所以请确保它是文本文件。