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

【问题标题】：Easiest way to load and read a local text file with javascript?使用 javascript 加载和读取本地文本文件的最简单方法？
【发布时间】：2013-07-21 04:04:21
【问题描述】：

我有一个我希望加载的 .csv 文件，其中包含 .HTML 页面将使用的信息。但是，我不确定如何执行此操作，

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

我查看了 HTML5 的 FileReader，它似乎可以完成工作，但它似乎需要使用输入表单。我只想加载文件并能够访问其中的文本并在我认为合适的时候对其进行操作。

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

这通常是怎么做的？

【问题讨论】：

将 CSV 包装在有效的 JS 中，并通过 <script> 元素加载它。
经过进一步研究，似乎没有可靠的跨浏览器方式来读取本地文件而无需用户输入。你至少需要一个表格。但是，您可以在读取文件后将文件存储在 localStorage 中，并且仅在 localStorage 没有文件时才提示输入。这会将提示减少为一次性事件。
肯定有什么方法可以自动读取txt文件？我知道让网站访问您的计算机文件会导致一些安全问题，但是没有办法消除该限制并让网站完全清晰，以便我可以访问我的信息数据库。

标签： javascript html ajax file

【解决方案1】：

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

另一种可能对您有用的方法是使用将文件拖放到您的网页上。有关“拖放文件”，请参阅您首选的 DOM 参考。

【讨论】：

【解决方案2】：

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

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

【讨论】：

我收到错误消息“Access-Control-Allow-Origin 不允许 Origin null。”使用 AJAX 时。 The solution 似乎实际上是在网络上托管它，但我纯粹是在本地做这个。
@sloth，浏览器安全不允许文件访问您的本地系统。要对此进行测试，您要么需要安装测试服务器并从中运行它，要么通过在线服务器运行

【解决方案3】：

出于安全目的，您不能发出跨域 ajax 请求。这就是拥有 api 的全部意义所在。但是，您可以从 $.get 请求 URL 中创建一个 api。

解决方案是使用 YQL（雅虎查询语言），它是一个非常漂亮的工具，可以从几乎任何网站调用 api。这样你就可以轻松读取文件的内容并使用它了。

您可能想查看official documentation 和YQL Console

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

【讨论】：

【解决方案4】：

您可以尝试 AJAX（如果您不需要异步处理，请将“async”设置为 false。以下版本在我通过本地 Web 服务器（地址包含“localhost”）和文本文件使用时尝试的任何浏览器中运行确实是 UTF-8 格式。如果您想通过文件系统启动页面（地址以“文件”开头），那么 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”格式的文件，供用户更改。

【讨论】：