Question

我正在尝试使用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-文件访问从档案”

现在它正常运作！

Answer 1

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

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

Answer 2

指定文件网址的完整路径

Answer 3

至少在firefox中运行正常。

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

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

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

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

Answer 4

这个正在运作

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

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

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

Answer 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\'追加字符串中的每一行。）

Answer 6

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

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

虽然这绝对是未来，但它仍具有高度的实验性，只有CanIUse知道才能在Google Chrome中使用。

Answer 7

只要不需要动态生成文件，例如简单的文本或html文件，就可以在没有Web服务器的情况下在本地测试它 - 只需使用相对路径。

Answer 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);

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

Answer 10

如果没有WEB服务器，你就无法做到这一点!!! Chrome将XMLHttpRequest发送到看起来像这样的系统

GET /myFile.txt HTTP/1.1

并且操作系统没有在端口80上监听以接收此信息！即使它是，它必须实现HTTP协议与浏览器通信...

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

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

10 个答案:

HTML：

的script.js：