jQuery/ Javascript .get method for reading text files

Question

I just started working on my school assignment with some regular expressions in Javascript. I can't seem to figure out how to actually read data from a text file into variable using jQuery method .get(). When I try my code out nothing happens. It seems like it never enters .get() section. Here is my code:

JS file:

document.getElementById('file').onchange = function(){
var file = "New Text Document.txt";  //this will later be the selected file

$.get(file,function(data){
    var myVar = data;
    $("#123").html(myVar);
});
};

HTML file:

<!DOCTYPE html>
<html>
<head>
<title>animacija</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<input type="file" name="file" id="file">
<script type="text/javascript" src="func.js"></script>

<div id="123"></div>

</body>
</html>

Possible duplicate of [jquery - Read a text file?](http://stackoverflow.com/questions/1981815/jquery-read-a-text-file) — Liam, Mar 02 '17 at 17:00
Are you viewing this HTML page in your browser as a server-hosted `http:` (or `https:`) page, or as a `file:` document? If `http:`, is the text resource you're trying to read also hosted on that same server? — apsillers, Mar 02 '17 at 17:01
As a file:, and text resource is in the same directory as my http and js document. — Luki, Mar 02 '17 at 17:03
Seems like exactly this was the error... I put my files on a uwamp server and now it works as the protocol is localhost: thank you :) — Luki, Mar 02 '17 at 17:10

gtrenco · Answer 1 · 2017-03-02T18:32:59.400

The code snippet seems to be ok, but it will not work locally since $.get is for ajax requests and requires full available server path.

I rather recommend you the use of FileReader API.

HTML

<title>animacija</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
  <input type="file" name="file" id="file">
  <div id="123"></div>
</body>

JavaScript

document.getElementById('file').onchange = function() {

  var file = this.files[0];
  var FR = new FileReader();

  FR.readAsText(file);
  FR.onload = function(data) {
    var myVar = data.target.result;
    $("#123").html(myVar);
  }
};

JSFiddle

Hope it works for you!

apsillers · Accepted Answer · 2017-03-02T17:37:32.590

Most browsers will not allow file: resources to read other local files. This is to prevent attacks where a downloaded HTML document could start reading (and transmitting) the contents of your hard drive (or at least your Downloads folder) as soon as you open it.

The other thing you need to know here is that $.get is used for getting resources from an HTTP server, while file inputs are used to allow a user to select a file from their local drive. I realize in your case it's a little confusing, because your web page is on your local hard drive, but imagine if your HTML and scripts were being hosted online, and some other user (not you) was using them to process their own locally-stored files.

MDN has a good tutorial on how to get started with <input type="file"> inputs.

score 1 · Answer 3 · answered Mar 02 '17 at 17:14

The code won't work locally due to cross-origin limitations.
It works fine when run on a remote server and all files are in the same folder.

If you want to read local files (aka. files selected by user through the file input) you can read more about FileAPI here:

https://www.html5rocks.com/en/tutorials/file/dndfiles/

jQuery/ Javascript .get method for reading text files

3 Answers3