Read Text File And Display In HTML Using JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of read text file and display in HTML using JavaScript, here we defined file input tag for collect text file and in script defined file reader object and we loading uploaded text file using onload event.
We are retrieving all texts from file using file reader object and appends on div element defined in html block for display whole contents in uploaded text file by readAsText() method.
Step By Step Guide On Read Text File And Display In HTML Using JavaScript :-
Here we defined input tag with file type for upload text file and defined div tag with id ‘res’ for appends retrieved file contents on webpage.
In script we adding event listener on input tag by id ‘infl’ then defining function within that for read text file.
Here we creating file reader object ‘file_reader’ then we adding onload event with that then defined function, within that we setting file_reader object position then using readAsText() method we reading the contents of text file from first position and appended all contents on div element ‘res’.
<!DOCTYPE html>
<html>
<head>
<title>Read and Display Text File</title>
</head>
<body>
<input type="file" name="rf" id="infl">
<div id="res"></div>
<script>
document.getElementById('infl').addEventListener('change',function(){
var file_reader=new FileReader();
file_reader.onload=function(){
document.getElementById('res').textContent=file_reader.result;
}
file_reader.readAsText(this.files[0]);
})
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In html we defined input tag with file type for upload any text files and div tag defined with id ‘res’ for appends retrieved contents on webpage.
- In <script> we adding addEventListener event on input tag by id ‘infl’ using that we defining ‘change’ function, within that we created file reader object ‘file_reader’.
- We appending onload event for define function, here we adding file reader on div element ‘res’ then using readAsText() method with file reader object we reading all contents from 0th position and appends on div element.
- Both </body>, </html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to read text file and display in html using javascript.
When we executing this program on browser we can see file uploading option user needs to upload .txt type any one file then result of that file contain texts will displayed on webpage.
If you’re uploaded some other type file means it retrieve and display but we can’t read them because we need to format them.
For read any type of files we need to use file reader with some other process later we will see about them.
I hope this tutorial on read text file and display in HTML using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
