jQuery：从文件系统中读取文本文件答案

【问题标题】：jQuery: read text file from file systemjQuery：从文件系统中读取文本文件
【发布时间】：2010-12-10 12:12:33
【问题描述】：

我正在尝试使用 jquery 读取文本文件，如下所示：

// LOAD file and split line by line and append divs
$.get('myFile.txt', function(data) {    
    var lines = data.split("\n");

    $.each(lines, function(n, elem) {
       $('#myContainer').append('<div>' + elem + '</div>');
    });
});

在 chrome 中，我得到：

XMLHttpRequest cannot load file:///C:/myPath/myFile.txt. Origin null is not allowed by Access-Control-Allow-Origin.

Firefox 没有显示错误，但代码没有执行（我在 firebug 中有断点，并且匿名函数从不运行）。

任何帮助表示赞赏！

编辑：

必须：

使用文件完整路径
启动镀铬 "--allow-file-access-from-files"

现在一切正常！

【问题讨论】：

您在哪里（在哪个 URL 上）运行此脚本？

标签： jquery file filesystems get

【解决方案1】：

您无法从本地文件系统加载文件，像这样，您需要将其放在 Web 服务器上并从那里加载。在加载 JavaScript 的同一站点上。

编辑：查看这个thread，您可以使用选项--allow-file-access-from-files 启动chrome，这将允许访问本地文件。

【讨论】：

这更像是单一供应商配额，而不是一般规则。在 localhost 上创建一个 Web 服务器并测试代码 - 这样它也可以在 Chrome 中工作，因为正如您所见，默认情况下它不支持从本地文件系统读取。
如果您只能在文件所在的 PC 上运行网页，那还有什么意义？
出于管理员原因，我需要一个简单的页面来在给定机器上加载日志文件。相信我，这是有道理的。
好吧，我只是说这是一种不好的做法。
@JohnIdol，更新了答案。

【解决方案2】：

指定文件url的完整路径

【讨论】：

显然这是 chrome 中的一个错误 --> code.google.com/p/chromium/issues/…

【解决方案3】：

这至少在 Firefox 中运行良好。

我面临的问题是，我得到了一个 XML 对象而不是纯文本字符串。从我的本地驱动器读取 xml 文件工作正常（与 html 相同的目录），所以我不明白为什么读取文本文件会是一个问题。

我想我需要告诉 jquery 传递一个字符串而不是一个 XML 对象。这就是我所做的，它终于奏效了：

function readFiles()
{
    $.get('file.txt', function(data) {
        alert(data);
    }, "text");
}

注意末尾添加了“文本”。这告诉 jquery 将 'file.txt' 的内容作为字符串而不是 XML 对象传递。警告框将显示文本文件的内容。如果您删除末尾的“文本”，警告框将显示“XML 对象”。

【讨论】：

【解决方案4】：

这个正在工作

        $.get('1.txt', function(data) {
            //var fileDom = $(data);

            var lines = data.split("\n");

            $.each(lines, function(n, elem) {
                $('#myContainer').append('<div>' + elem + '</div>');
            });
        });

【讨论】：

【解决方案5】：

我使用的一种解决方法是将数据包含为一个 js 文件，该文件实现了一个将原始数据作为字符串返回的函数：

html:

<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
  <script type="text/javascript">
    function loadData() {
      // getData() will return the string of data...
      document.getElementById('data').innerHTML = getData().replace('\n', '<br>');
    }
  </script>
</head>

<body onload='loadData()'>
  <h1>check out the data!</h1>
  <div id='data'></div>
</body>

</html>

script.js:

// function wrapper, just return the string of data (csv etc)
function getData () {
    return 'look at this line of data\n\
oh, look at this line'
}

在这里查看它的实际效果-http://plnkr.co/edit/EllyY7nsEjhLMIZ4clyv?p=preview 缺点是您必须对文件进行一些预处理以支持多行（在字符串中的每一行附加'\n\'）。

【讨论】：

【解决方案6】：

这不起作用，也不应该这样做，因为这将是一个巨大的安全漏洞。

看看新的File System API。它允许您请求访问由浏览器管理的虚拟沙盒文件系统。您必须要求您的用户将他们的文件“上传”到沙盒文件系统一次，但之后您可以非常优雅地使用它。

虽然这绝对是未来，但它仍然是高度实验性的，据CanIUse 所知，仅适用于谷歌浏览器。

【讨论】：

【解决方案7】：

只要文件不需要动态生成，例如，简单的文本或 html 文件，您可以在本地测试它而无需网络服务器 - 只需使用相对路径即可。

【讨论】：

【解决方案8】：

如果包含文件输入框，则可以使用 FileReader 对象将文件作为 base64 编码字符串访问。如果是文本文件，则可以通过简单的 base64 解码来获取文本。

假设以下 HTML：

<input type="file" id="myfile" />

您可以使用以下 JQuery JS 访问：

var file = $('#myfile').get(0).files[0];
var reader = new FileReader();
reader.onload = function (e) {
    //get the file result, split by comma to remove the prefix, then base64 decode the contents
    var decodedText = atob(e.target.result.split(',')[1]);
    //show the file contents
    alert(decoded);
};
reader.readAsDataURL(file);

【讨论】：

【解决方案9】：

这样的东西是我一直使用的。无需任何 base64 解码。

<html>
<head>
<script>
      window.onload = function(event) {
        document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
      }

      function handleFileSelect(event) {
        var fileReader = new FileReader();
        fileReader.onload = function(event) {
          $('#accessKeyField').val(event.target.result);
        }
        var file = event.target.files[0];
        fileReader.readAsText(file);
        document.getElementById('fileInput').value = null;
      }
</script>
</head>
<body>
<input type="file" id="fileInput" style="height: 20px; width: 100px;">
</body>
</html>

【讨论】：

【解决方案10】：

如果没有 WEB SERVER，您将无法做到这一点！！！ Chrome 将 XMLHttpRequest 发送到看起来像这样的系统

GET /myFile.txt HTTP/1.1

并且操作系统没有监听端口 80 来接收这个！而且即使是，也必须实现HTTP协议才能与浏览器通信……

要使其正常工作，您必须在系统上安装 WEB SERVER，它将侦听端口 80 并通过 HTTP 连接使您的文件可用，从而使您的代码可运行。

【讨论】：

不正确。可以向本地文件发出 Ajax 请求。
解释一下，因为文件系统不知道HTTP请求，而AJAX实际上是一个HTTP请求！？您可以向 Web 服务器发出请求，该服务器将获取您的本地文件并通过 HTTP 进行隧道传输。
完整路径意味着将file:指定为协议？
是的，我必须这样做才能让它工作。还发现chrome的问题是已知问题-->code.google.com/p/chromium/issues/…