jQuery: read text file from file system

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

// 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:

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).

Any help appreciated!

EDIT:

had to:

use the file full path
launch chrome with "--allow-file-access-from-files"

now it's working OK!

标签： jquery file filesystems get

8条回答

Animai°情兽

2楼-- · 2019-01-09 10:08

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.

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

0人赞添加讨论(0) 举报

叼着烟拽天下

3楼-- · 2019-01-09 10:08

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.

0人赞添加讨论(0) 举报

霸刀☆藐视天下

4楼-- · 2019-01-09 10:11

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>');
            });
        });

0人赞添加讨论(0) 举报

Ridiculous、

5楼-- · 2019-01-09 10:18

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:

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\').

0人赞添加讨论(0) 举报

smile是对你的礼貌

6楼-- · 2019-01-09 10:20

specify the full path of the file url

0人赞添加讨论(0) 举报

不美不萌又怎样

7楼-- · 2019-01-09 10:30

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.

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

0人赞添加讨论(0) 举报

1 2 下一页