Question

我有一个我希望加载的.csv文件，其中包含.HTML页面将自行格式化的信息。我不知道怎么做，

以下是文件的简单图片：http://i.imgur.com/GHfrgff.png

我已经查看了HTML5的FileReader，看起来它可以完成工作但似乎需要使用输入表单。我只是想加载文件并能够访问里面的文本并按照我的意愿操作它。

This post提到了AJAX，但问题是这个网页只会在本地部署，所以有点不确定。

这通常是怎么做的？

Answer 1

由于您的网页和数据文件位于同一目录中，因此您可以使用AJAX读取数据文件。但是，我从图片中的图标中注意到您使用的是Chrome。默认情况下，Chrome会仅阻止该功能并报告访问冲突。要允许读取数据文件，您必须使用命令行选项--allow-file-access-from-files调用Chrome。

另一种可能适合您的方法是使用拖动文件并放入您的网页。有关“拖放文件”的信息，请参阅您首选的DOM参考。

Answer 2

您可以完全向本地文件发出ajax请求，并将其内容恢复。

如果您使用的是jQuery，请查看将在变量中返回文件内容的$.get()函数。您只需在参数中传递文件的路径，就像查询“普通”URL一样。

Answer 3

您无法为安全目的制作跨域ajax请求。这是apis的重点。但是，您可以使用$.get请求网址生成API。

解决方案是使用YQL（雅虎查询语言），这是一个非常漂亮的工具，几乎可以在任何网站上进行api调用。因此，您可以轻松阅读文件的内容并使用它。

您可能需要查看official documentation和YQL Console

我还专门编写了一个blog post，用于将YQL用于跨域ajax请求。希望它有所帮助

Answer 4

您可以尝试使用AJAX（如果您不需要将异步处理设置为“async”为false。以下版本在我通过本地Web服务器（地址包含“localhost”）和文本文件使用时尝试的任何浏览器中运行确实是UTF-8格式。如果你想通过文件系统启动页面（地址以“file”开头），那么Chrome（也可能是Safari，但不是Firefox）生成“Origin null is Access-Control-Allow-Origin不允许。“ - 上面提到的错误。请参阅讨论here。

    $.ajax({
        async: false,
        type: "GET",
        url: "./testcsv.csv",
        dataType: "text",
           contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        success: function (data) {
             //parse the file content here
           }
        });

尽管如此，使用包含Phrogz提到的变量设置的脚本文件的想法可能是您可行的选择。我使用“Ini”格式的文件被用户更改。

使用javascript加载和读取本地文本文件的最简单方法？

4 个答案: