Question

我有一个客户端javascript，我想从本地csv文件中读取。在html代码中，我使用脚本标记导入本地javascript文件，此js文件位于另一个文件夹中。

js文件的内容

$.ajax({
    type: "GET",
    url: "./../../data/English.csv",
    dataType: "text",
    success: function(data) {
        alert("worked");
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
 });

csv文件的路径是相对于html文件的。但是会触发错误功能。有办法解决这个问题吗？

由于

Answer 1

我遇到了几个可以直接解析本地（客户端）CSV文件的jQuery插件：

Answer 2

Ajax用于与远程服务器交互。出于安全原因，会阻止对本地文件的直接浏览器访问，因为用户必须同意访问本地文件。可接受的方法是通过文件选择器UI并让用户选择一个文件，而不是让软件预先指定一个位置。

我在GitHub上共享了一个库html5csv.js [license：GPLv3]，它依赖于jQuery并以各种方式操纵本地 CSV或表格数据。

这是jsfiddle example of using a filepicker to select and display a table from a local csv file

从主页：https://github.com/DrPaulBrewer/html5csv/blob/master/README.md

要向CSV应用程序“上传”来自用户的CSV数据文件：

HTML

<input type='file' id='choose' />

Javascript（加载jQuery和html5csv库之后）

CSV.begin('#choose').....go();

其中.....不是字面.....，而是一串其他html5csv.js库调用（请参阅beginner page和wiki）来访问和操作返回数据。此语句定义了一个异步工作流，该工作流以获取数据开始并继续执行每个调用，并且go（）被链接以指示启动工作流。

假设你写了一个

function show(rows)

在您的代码中对CSV数据执行某些操作并显示它，其中行应该是一个数组数组，表示读取后CSV文件的行。

您的html5csv.js库调用（使用HTML文件选择上面的元素）可以是：

CSV.begin('#choose')
    .go(function(e,D){ 
       if(e) return console.log(e); 
       show(D.rows); 
      });

可用的库功能包括通过与jqPlot集成，调用用户定义的函数，线性拟合和PCA来制作表格，编辑，绘图。

Answer 3

我在chorme上尝试了以下示例：

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
test this
</body>
<script>
$.ajax({
    type: "GET",
    url: "English.csv",
    dataType: "text",
    success: function(data) {
        alert("worked");
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
 });
 </script>

我在控制台上看到以下错误：

XMLHttpRequest无法加载file：/// C：/temp/local/English.csv。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许原点'null'访问。

有关详细信息，请参阅This answer。

如果您尝试仅在开发环境中使其工作，则可以尝试使用以下命令启动chorme：

chrome.exe --allow-file-access-from-files

其他选择是尝试：

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
test this
</body>
<script>

$.ajaxPrefilter( 'script', function( options ) {
    options.crossDomain = true;
});

$.ajax({
    type: "GET",
    url: "English.csv",
    dataType: "script",
    success: function(data) {
        alert("worked");
    },
    error: function (request, status, error) {

        alert(error);
    }
 });

 </script>

此致塔伦

Answer 4

启动测试服务器。

是的，即使您在本地进行测试。如果您只是直接在浏览器中打开源文件，则ajax将无法运行。它需要服务器才能退出请求。

如何在客户端javascript中读取本地csv文件？

4 个答案: