21

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!

Improve this question
1
  • Where (on what URL) are you running this script? Commented Dec 10, 2010 at 12:18

10 Answers 10

Reset to default
17

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That's more of a single vendor allowance than a general rule. Create a web server on localhost and test out the code – that way it will work in Chrome as well, since, as you've seen, it doesn't support reading from local file system by default.
What's the point of a web page if you are bound to run it only on the PC the file is on?
I need a simple page to load a log file for admin reasons on a given machine. Trust me, it has a point.
Ok, all I am saying is that is a bad practice.
6

This is working fine in firefox at least.

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.

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:

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

Improve this answer

Comments

5

specify the full path of the file url

Improve this answer

1 Comment

apparently it's a bug in chrome --> code.google.com/p/chromium/issues/…
4

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

Comments

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:

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

Improve this answer

Comments

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.

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

Improve this answer

Comments

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.

Improve this answer

Comments

0

If you include a file input box you can access the file as a base64 encoded string by using the FileReader object. If it's a text file a simple base64 decode will work to get the text.

Assuming the following HTML:

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

You can access using the following 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);
Improve this answer

Comments

0

Something like this is what I use all the time. No need for any base64 decoding.

<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>
Improve this answer

1 Comment

This works for the client only, and should it run on another machine would not be referencing the same file. That probably is what the OP wanted, but newcomers should be wary that fileReader and $.get do very different things. On the upside, you could write this to view a local log and get system-specific logs, so if you had lots of machines you wanted to use a HTML-based log viewer with their local files, this would in fact be a way to go (HTML5 only, keep that in mind)
-2

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

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

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.

Improve this answer

4 Comments

Not true. It is possible to make Ajax requests to a local file.
Explain how, because file system is not aware of HTTP requests, and AJAX is actually a HTTP request!? You can make requests to web server which will get your local file and tunnel it through HTTP.
Full path meaning specifying file: as a protocol?
yes, that's what I had to do to get it working. Also found out that the problem with chrome is a known issue --> code.google.com/p/chromium/issues/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.