读取本地文本文件js

Question

So, with my chrome extension I need to read a text file. I'm trying to use this to just output the text file to the console

$.get('text.txt', function(data){
    console.log(data);
});

But in console it outputs the data of the webpage, not my text file at all.

EDIT- Now I understant how jQuery.get works. I have my local text file and jQuery.get is meant for server files. I need a way to read local text files. Any help here?

Answer 1

You have to specify the dataType (that you're expecting back from the server) as text :

$.get('text.txt', function(data){
  console.log(data);
}, 'text');

Answer 2

SOLUTION:

It will not load files from your local filesystem this way

You need to put it on a web server and load it from there. On the same site as you have the JavaScript loaded from.

Creating the webserver on localhost should work in Chrome, As it doesn't support reading files from the local filesystem by default.

Additionally, you can start chrome using option --allow-file-access-from-files, which would allow access to local files.

Answer 3

You can read local files like so:

 function readTextFile(file) { const fReader = new FileReader(); fReader.readAsText(input.files[0]); fReader.onloadend = function(event) { document.getElementById('contents').innerHTML = event.target.result; } } const input = document.getElementById('myfile'); input.addEventListener('change', function() { readTextFile(input.files[0]) });

 <input type="file" id="myfile" name="myfile"> <div id="contents"></div>

Documentation for the FileReader.

Answer 4

You can use FileReader to read files, in this exeple I use a csv file, but you can use txt to.

In my case, I use a input with type 'file' and with a onChange I load the file. By other part, I have a ref for indicate the source.

<input type="file" class="custom-file-input" ref="doc_categories" onChange="read_file">

In the method 'read_file', I get the first file and I check that exist by his name.

this.file = this.$refs.doc_categories.files[0];   

if(this.file.name != undefined){
     const reader = new FileReader();
     if (this.file.name.includes(".csv")) {
        reader.onload = (res) => {
            this.content = res.target.result;
        };
        reader.onerror = (err) => console.log(err);
        reader.readAsText(this.file);
     } else {
       this.content = "check the console for file output";
       reader.onload = (res) => {
         console.log(res.target.result);
       };
       reader.onerror = (err) => console.log(err);
       reader.readAsText(this.file);
     }
}else{
  $.notify('Error to read the file.');
}

This code comes from vue code and I tried to migrate to js vanilla. I hope it helped you.