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

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

javascript jquery html ajax csv

如何在客户端javascript中读取本地csv文件？,javascript,jquery,html,ajax,csv,Javascript,Jquery,Html,Ajax,Csv,我想从本地csv文件中读取客户端javascript。在html代码中，我使用脚本标记导入了一个本地javascript文件，这个js文件位于另一个文件夹中 js文件的内容 $.ajax({ type: "GET", url: "./../../data/English.csv", dataType: "text", success: function(data) { alert("worked"); }, error: funct

我想从本地

csv

文件中读取客户端javascript。在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文件。但是会触发错误功能。有办法解决这个问题吗

谢谢

我在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>


测试这个
$.ajax({
键入：“获取”，
网址：“English.csv”，
数据类型：“文本”，
成功：功能（数据）{
警惕（“已工作”）；
},
错误：功能（请求、状态、错误）{
警报（request.responseText）；
}
});

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

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

有关更多详细信息，请参阅

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

chrome.exe--允许从文件访问文件

另一种选择是尝试：

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


测试这个
$.ajaxPrefilter（'script'，函数（选项）{
options.crossDomain=true；
});
$.ajax({
键入：“获取”，
网址：“English.csv”，
数据类型：“脚本”，
成功：功能（数据）{
警惕（“已工作”）；
},
错误：功能（请求、状态、错误）{
警报（错误）；
}
});

我发现了几个jQuery插件，它们可以直接解析本地（客户端）CSV文件：

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

我在GitHub上共享了一个库[license:GPLv3]，它依赖于jQuery并以各种方式处理localCSV或表格数据

这是一个

从主页：

要将用户的CSV数据文件“上载”到CSV应用程序，请执行以下操作：

HTML

其中，

..

不是字面上的

..

，而是用于访问和操作返回数据的其他html5csv.js库调用字符串（请参见和）。此语句定义了一个异步工作流，该工作流从获取数据开始，然后进行每个调用，并链接go（）以指示启动工作流

假设你写了一篇文章

功能显示（行）

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

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

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

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

启动测试服务器

是的，即使你在本地测试。如果直接在浏览器中打开源文件，ajax将无法工作。它需要一个服务器来从中跳出请求。

错误消息是什么？您是否在本地文件系统或服务器上运行此操作？本地系统，错误消息为空字符串。@Lawrence，这是来自filepicker的，如果我有相对路径，如何将其硬编码到javascript中？请参阅关于ajax调用中的相对路径。那么您对“有办法解决此问题吗？”是…？我试着用“chrome.exe——允许从文件访问文件”启动chrome，这对我来说很有效，记住在尝试之前关闭chrome的所有实例。链接很好，但本身不是很有用。如果你能在答案的正文中解释如何使用链接的资源来解决OP的具体问题，那会更有帮助。@Pops，有东西总比没有好？一个教程可能比分享链接更有帮助，但是分享我知道的图书馆的链接希望比继续学习更有帮助。嗨，我用papaparse，但我讨厌官方网站。看起来他们更新了版本，并部分更新了文档。某些功能不能像它们描述的那样工作。但这里有一篇很好的文章教程，可以创建一个工作示例。它看起来太复杂了，你能为这个问题做一个JSFIDLE吗？@YevgeniyAfanasyev请看上面的编辑和JSFIDLE。

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

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