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

时间：2021-07-19 03:04:01

I am trying to read a text file using jquery, like this:

我试图使用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>');
    });
});

In chrome, I am getting:

在chrome中，我得到：

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

Firefox shows no error but the code is not executed (I have breakpoints in firebug and the anonymous function never runs).

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

Any help appreciated!

任何帮助赞赏！

EDIT:

编辑：

had to:

必须：

  • use the file full path
  • 使用文件完整路径
  • launch chrome with "--allow-file-access-from-files"
  • 使用“--allow-file-access-from-files”启动chrome

now it's working OK!

现在它工作正常！

8 个解决方案

#1

14  

You can't load a file from your local filesystem, like this, you need to put it on a a web server and load it from there. On the same site as you have the JavaScript loaded from.

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

EDIT: Looking at this thread, you can start chrome using option --allow-file-access-from-files, which would allow access to local files.

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

#2

5  

specify the full path of the file url

指定文件URL的完整路径

#3

4  

This is working fine in firefox at least.

这至少在Firefox中运行良好。

The problem I was facing is, that I got an XML object in stead of a plain text string. Reading an xml-file from my local drive works fine (same directory as the html), so I do not see why reading a text file would be an issue.

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

I figured that I need to tell jquery to pass a string in stead of an XML object. Which is what I did, and it finally worked:

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

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

Note the addition of '"text"' at the end. This tells jquery to pass the contents of 'file.txt' as a string in stead of an XML object. The alert box will show the contents of the text file. If you remove the '"text"' at the end, the alert box will say 'XML object'.

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

#4

3  

A workaround for this I used was to include the data as a js file, that implements a function returning the raw data as a string:

我使用的解决方法是将数据包含为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'
}

See it in action here- http://plnkr.co/edit/EllyY7nsEjhLMIZ4clyv?p=preview The downside is you have to do some preprocessing on the file to support multilines (append each line in the string with '\n\').

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

#5

3  

this one is working

这个是有效的

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

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

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

#6

2  

This doesn't work and it shouldn't because it would be a giant security hole.

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

Have a look at the new File System API. It allows you to request access to a virtual, sandboxed filesystem governed by the browser. You will have to request your user to "upload" their file into the sandboxed filesystem once, but afterwards you can work with it very elegantly.

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

While this definitely is the future, it is still highly experimental and only works in Google Chrome as far as CanIUse knows.

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

#7

1  

As long as the file does not need to be dynamically generated, e.g., a simple text or html file, you can test it locally WITHOUT a web server - just use a relative path.

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

#8

-2  

You can't do this without the WEB SERVER!!! Chrome sends XMLHttpRequest to the system that looks something like this

没有WEB SERVER你就做不到!!! Chrome将XMLHttpRequest发送到看起来像这样的系统

GET /myFile.txt HTTP/1.1

And the operating system is not listening on port 80 to receive this! And even if it is, it must implement HTTP protocol to communicate with the browser...

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

To get this working, you must have WEB SERVER installed on your system, that will listen on port 80 and make your files available through a HTTP connection, thus making your code runnable.

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

#1

14  

You can't load a file from your local filesystem, like this, you need to put it on a a web server and load it from there. On the same site as you have the JavaScript loaded from.

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

EDIT: Looking at this thread, you can start chrome using option --allow-file-access-from-files, which would allow access to local files.

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

#2

5  

specify the full path of the file url

指定文件URL的完整路径

#3

4  

This is working fine in firefox at least.

这至少在Firefox中运行良好。

The problem I was facing is, that I got an XML object in stead of a plain text string. Reading an xml-file from my local drive works fine (same directory as the html), so I do not see why reading a text file would be an issue.

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

I figured that I need to tell jquery to pass a string in stead of an XML object. Which is what I did, and it finally worked:

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

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

Note the addition of '"text"' at the end. This tells jquery to pass the contents of 'file.txt' as a string in stead of an XML object. The alert box will show the contents of the text file. If you remove the '"text"' at the end, the alert box will say 'XML object'.

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

#4

3  

A workaround for this I used was to include the data as a js file, that implements a function returning the raw data as a string:

我使用的解决方法是将数据包含为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'
}

See it in action here- http://plnkr.co/edit/EllyY7nsEjhLMIZ4clyv?p=preview The downside is you have to do some preprocessing on the file to support multilines (append each line in the string with '\n\').

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

#5

3  

this one is working

这个是有效的

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

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

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

#6

2  

This doesn't work and it shouldn't because it would be a giant security hole.

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

Have a look at the new File System API. It allows you to request access to a virtual, sandboxed filesystem governed by the browser. You will have to request your user to "upload" their file into the sandboxed filesystem once, but afterwards you can work with it very elegantly.

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

While this definitely is the future, it is still highly experimental and only works in Google Chrome as far as CanIUse knows.

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

#7

1  

As long as the file does not need to be dynamically generated, e.g., a simple text or html file, you can test it locally WITHOUT a web server - just use a relative path.

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

#8

-2  

You can't do this without the WEB SERVER!!! Chrome sends XMLHttpRequest to the system that looks something like this

没有WEB SERVER你就做不到!!! Chrome将XMLHttpRequest发送到看起来像这样的系统

GET /myFile.txt HTTP/1.1

And the operating system is not listening on port 80 to receive this! And even if it is, it must implement HTTP protocol to communicate with the browser...

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

To get this working, you must have WEB SERVER installed on your system, that will listen on port 80 and make your files available through a HTTP connection, thus making your code runnable.

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

标签：

相关文章