how to read text file in folder with javascript
JavaScript in browser doesn't give you direct access to file system.
What you did is just pass a string to your function and call text()
on it. Sadly it doesn't work like that.
Here are two workarounds I know of:
1. fetch api
If you have an http server serving your files then you make a request using fetch()
to obtain its content in JS. Read the docs here :
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Note that it won't work on pages loaded with file://
URI scheme. You need http(s). If you have python installed run python -m http.server 8000
in directory containing files to be served.
2. FileReader
If the file is to be selected by user as input to a form then you can use FileReader
Have a look these links:
webdev has great explaination for this
https://web.dev/read-files/
also see the docs
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
How to read a local text file in the browser?
You need to check for status 0 (as when loading files locally with XMLHttpRequest
, you don't get a status returned because it's not from a Webserver
)
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
And specify file://
in your filename:
readTextFile("file:///C:/your/path/to/file.txt");
Read text file in JavaScript from server
I created a basic example using just Javascript, starting with the example that I linked in the comments above. Just read in the text file using FileReader and create a loop in the onload function, where you parse out the records that you want. I based my file spec off of wikipedia, using the Example 6.
Result: https://jsfiddle.net/1sce9mv6/6/
Javascript:
document.getElementById('file').onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent) {
// Entire file for debugging
//console.log(this.result);
// By lines
var lines = this.result.split('\n');
console.log('File read.');
//Check if this is an m3u file
if (lines[0].includes("#EXTM3U")) {
console.log("File header found!");
//Go through each line
for (var line = 1; line < lines.length; line++) {
//Process line
if (lines[line].includes("#EXTINF")) {
//print full line
console.log(lines[line]);
//split each line into the elements
var currentLine = lines[line].substring(7).split(',');
console.log("Runtime: " + currentLine[0]);
console.log("Song:" + currentLine[1]);
} else {
continue;
}
}
} else {
console.log(lines[0]);
console.log("Not m3u file...");
}
};
reader.readAsText(file);
};
HTML:
<input type="file" name="file" id="file">
References:
- How to use Javascript to read local text file and read line by line?
- https://en.wikipedia.org/wiki/M3U#Examples
read a file then display in on client-side
JavaScript running in the web browser cannot have access to the file system on the server.
Imagine if you could open your browser's developer tools while using your online banking and just start reading files from your bank's hard disk!
If you want to get a file from the server to client-side JS you need to do something on both sides.
On the server you need to make the file available over HTTP(S). This could be as simple as putting the file somewhere under the DocumentRoot of the web server.
On the client you need to make an HTTP request. You can do that using the fetch
API, the XMLHttpRequest
API or a library that wraps one of them such as Axios.
Read / Write txt file on server using only javascript without involving any server side language
Only if JavaScript is your server side language (e.g. with Node.JS).
Servers don't let you write files to them by default. That would be a horrible security problem.
Related Topics
How to Add a Class to a Dom Element in JavaScript
How to Debug JavaScript with Ie 8
Thickness of Lines Using Three.Linebasicmaterial
Unsafe JavaScript Attempt to Access Frame with Url
Get Index of Clicked Element Using Pure JavaScript
Detect If Browser Tab Is Active or User Has Switched Away
Node.Js Variable Declaration and Scope
Why JavaScript Function Declaration (And Expression)
How to Access Custom Attributes from Event Object in React
How to Remove Element from Array in Foreach Loop
Watch for Object Properties Changes in JavaScript
JavaScript 'In' Operator for 'Undefined' Elements in Arrays
Why Are Objects Not Iterable in JavaScript
How to Remove Emoji Code Using JavaScript
Share Variables Between Files in Node.Js