如何读取客户端的JavaScript本地csv文件？ [英] How to read local csv file in client side javascript?

问题描述

我有，我想从一个地方 CSV 文件的读取客户端的JavaScript。在HTML code，我导入使用脚本标记本地JavaScript文件和这个js文件是在另一个文件夹。

JS文件的内容

  $。阿贾克斯（{
    键入：GET，
    网址：./../../data/English.csv
    数据类型：文本，
    成功：功能（数据）{
        警报（工作）;
    }，
    错误：函数（请求，状态，错误）{
        警报（request.responseText）;
    }
 }）;
 

的路径csv文件是相对于HTML文件。然而，误差函数被触发。有没有办法来解决这个问题？

感谢

解决方案

Ajax是与远程服务器进行交互。直接布劳尔访问本地文件被阻止出于安全理由，用户必须给予同意访问本地文件。在可以接受的方式是要通过文件选择器的用户界面，并让用户选择一个文件，而不是软件pre指定的位置。

我的共享GitHub上 html5csv.js 库[许可证：GPLv3的]，它依赖于jQuery和操纵以各种方式本地 CSV或表格数据。

下面是一个使用filepicker选择和从本地csv文件显示一个表 <的的jsfiddle例子/ P>

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

要上传到CSV从用户应用程序的CSV数据文件：

HTML

 ＆LT;输入类型='文件'ID =选择/＆GT;
 

使用Javascript（装载jQuery和html5csv库后）

  CSV.begin（'＃选择）......去（）;
 

其中， ...... 不是字面上 ...... ，但其他html5csv字符串。所使用（见初学网页和的维基）来访问和操纵返回的数据。这个语句定义一个异步工作流开头的数据，并获取收益给每个呼叫，去（）被链接以指示启动工作流。

假设你已经写了

功能显示（行）

在你的code做一些事来CSV数据并显示，其中行预计，稀土present CSV文件的排它被读取后，数组的数组。

您html5csv.js库调用（与HTML文件选择要素如上）可能是：

  CSV.begin（'＃选择）
    。去（功能（E，D）{
       如果（五）收益的console.log（E）;
       显示（D.rows）;
      }）;
 

可用库的功能，​​包括通过与jqPlot集成制造的表，编辑，图形，调用用户定义的函数，线性拟合，而PCA。

I have client side javascript that I want to read from a local csv file. In the html code, I import a local javascript file using a script tag and this js file is in another folder.

The contents of the js file

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

The path to the csv file is relative to the html file. However the error function is triggered. Is there a way to fix this?

Thanks

解决方案

Ajax is for interacting with the remote server. Direct brower access to local files is blocked for security reason as user must give consent to access local files. The acceptable way is to go through the file picker UI and have the user pick a file, rather than having software prespecify a location.

I shared a library on GitHub html5csv.js [license: GPLv3] which depends on jQuery and manipulates local CSV or tabular data in various ways.

Here is a jsfiddle example of using a filepicker to select and display a table from a local csv file

From the main page: https://github.com/DrPaulBrewer/html5csv/blob/master/README.md

To "Upload" to the CSV app a file of CSV data from the user:

HTML

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

Javascript (after loading jQuery and html5csv library)

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

Where ..... is not literally ..... but a string of other html5csv.js library calls that are used (see the beginner page and wiki ) to access and manipulate the returned data. This statement defines an asynchronous workflow that begins with fetching the data and proceeds to each call, and go() is chained to indicate to start the workflow.

Let's say you have written a

function show(rows)

in your code to do something to the CSV data and show it, where rows is expected to be an array of arrays that represent the rows of the CSV file after it is read.

Your html5csv.js library call (with HTML file choose element as above) could be:

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

Available library functionality includes making tables, editing, graphing via integration with jqPlot, calling a user defined function, linear fits, and PCA.

这篇关于如何读取客户端的JavaScript本地csv文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！