如何在客户端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插件:
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将无法运行。 它需要一台服务器才能退出请求。