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

我有客户端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文件的。 但是会触发错误function。 有没有办法来解决这个问题?

谢谢

我遇到了几个可以直接解析本地(客户端)CSV文件的jQuery插件:

  1. http://papaparse.com/
  2. http://github.com/evanplaice/jquery-csv

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

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

这是一个使用filepicker从本地csv文件中选择和显示表的jsfiddle示例

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

要从用户“上传”CSV应用程序的CSV数据文件:

HTML

  

Javascript(加载jQuery和html5csv库之后)

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

其中.....不是字面上的.....而是一串其他html5csv.js库调用(参见初学者页面和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); }); 

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

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

       test this   

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

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

有关更多详细信息,请参阅此答案 。

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

chrome.exe – 从文件访问文件

其他选择是尝试:

       test this   

关心塔伦

启动测试服务器。

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