How to Read a Local Text File Using Javascript
Open up Local Text File Using JavaScript
- Employ JavaScript
FileReader()to Open Local Text File - Use JavaScript
FileReader()andjQueryto Open up Local Text File - Use JavaScript
PromiseandFileReaderto Open Local Text File
Our objective is to guide yous virtually various techniques and methods that you can employ to open a local text file using JavaScript. Information technology as well demonstrates the use of FileReader(), Promise, and dissimilar jQuery functions and events to read a text file from your system.
Use JavaScript FileReader() to Open Local Text File
HTML Code:
<!DOCTYPE html> <html> <head> <championship>Read Text File</title> </head> <trunk> <input id='selectedfile' type='text' name='selectedfile'> <input id='inputfile' type='file' name='inputfile' onChange='showSelectedFile()'> <br><br> <pre id="output"></pre> </body> </html> CSS Code:
input[blazon=file]{ width:90px; color:transparent; } JavaScript Code:
function showSelectedFile(){ selectedfile.value= document.getElementById("inputfile").value; } document.getElementById('inputfile') .addEventListener('alter', function() { var fr=new FileReader(); fr.onload=part(){ certificate.getElementById('output') .textContent=fr.result; } fr.readAsText(this.files[0]); }) Output:
This code prints the content of the selected file (input file) the same every bit information technology is written in the input file.
The showSelectedFile() method shows the input file's path. Then, the element whose id's value is inputfile gets selected.
The outcome listener listens to the input for changes. Here, it is changed when file(south) are chosen.
Every bit presently as information technology is changed, an anonymous part runs that creates a FileReader object using the FileReader() constructor and names it fr. Using fr, we can access unlike functions and attributes of FileReader(). This function reads the text content and displays it in the browser.
The .onload is used to launch a particular function. In our case, this function selects the first element having id every bit output and sets its .textContent property with the value of .result.
.textContent reads the content of current chemical element (node) and its descendant elements. .readAsText() reads the content of the given input file. One time it reads all the content, the result attribute has this content as a string.
The FileList is returned by the input element's files property. In this example, it is causeless that this is an input element that returns the file object at index zero (this.files[0]).
Employ JavaScript FileReader() and jQuery to Open Local Text File
HTML Code:
<!DOCTYPE html> <html> <caput> <title>Read Text File</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <input type="file" name="inputfile" id="inputfile"> <br><br> <pre id="output"></pre> </body> </html> JavaScript Code:
$(certificate).ready(function(){ $("#inputfile").change(function(){ var file = this.files[0]; var fr=new FileReader(); fr.onload=function(data){ $("#output").html(information.target.result); } fr.readAsText(file); }); }); Output:
Hey, Are you learning nearly how to open a local text file using JavaScript? This sample lawmaking likewise prints the content for the input file equally it is written in the file (input file).
The ready() event triggers when the certificate object model (DOM) is fully loaded. To understand hands, you tin can say that information technology makes a method accessible after loading the document.
The alter() upshot is used to know if the value of the element is changed. We can apply change() event only with input, textarea, and select elements. Information technology can either triggers the modify() event or executes a role on alter() effect.
.html() is very useful if y'all desire to render or fix the innerHTML (content) of the called elements.
Now, you might recall about how the innerHTML is existence inverse? It is due to targeting the issue attribute of FileReader.
Have a look at the post-obit screenshot (outlined in orange color).
The .onload, .issue, .readAsText() are already explained in previous section. You can get there to take a wait or check this link to read in detail.
You can utilise File-System to read a local text file (if y'all are coding on Node Environment).
Use JavaScript Promise and FileReader to Open Local Text File
HTML Code:
<!DOCTYPE html> <html> <head> <title>Read Text File</title> </head> <body> <input type="file" onchange="readInputFile(this)"/> <h3>File Content:</h3> <pre id="output"></pre> </body> </html> JavaScript Code:
function readFile(file) { render new Promise((resolve, reject) => { allow freader = new FileReader(); freader.onload = x=> resolve(freader.issue); freader.readAsText(file); })} async part readInputFile(input) { output.innerText = await readFile(input.files[0]); } Output:
Hey, Are y'all learning well-nigh how to open up a local text file using JavaScript? In this example code, the function readInputFile() runs as soon as the input file is selected. This function will await (using the expect operator) for the Hope to exist fulfilled and return the expected value (if resolved).
Farther, the content (innerHTML) of the chemical element having id output volition be replaced with the value returned by Hope. The await operator is used to waiting for the Promise, it is an object that represents pass or fails of an asynchronous function and its respective value. It has three states named resolve, refuse, and pending.
Write for u.s.
DelftStack articles are written by software geeks like yous. If you likewise would like to contribute to DelftStack past writing paid articles, you can check the write for us folio.
Related Commodity - JavaScript File
Source: https://www.delftstack.com/howto/javascript/open-local-text-file-using-javascript/
0 Response to "How to Read a Local Text File Using Javascript"
Post a Comment