All TalkersCode Topics

Follow TalkersCode On Social Media

Read A Text File In JavaScript

Last Updated : Feb 13, 2023

Read A Text File In JavaScript

In this article we will show you the solution of read a text file in JavaScript, in HTML, a text file can be uploaded by the user. We will use JavaScript to read the text file.

In order to do that we will use FileReader() function. We will understand this by an example.

Step By Step Guide On Read A Text File In JavaScript :-

Let us see an example to read a text file in JavaScript.

<!DOCTYPE html>
<html lang = " en " >
<head>
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title> read a text file in JavaScript </title>
    <style>
    h1 {
         font-size : larger ;
         font-weight : bolder ;
         color : lightgreen ;
         text-align : center ;
        }
    div {
        display : block ;
        align-items : center ;
    }
    </style>
</head>
<body>
    <h1> TALKERSCODE </h1>
    <h3> read a text file in JavaScript </h3>
    <div>
    <input type = " file " id = " upload " >
    <p id = " text " >
    </p>
     </div>
<script>
    let upload = document.getElementById ( ' upload ' ) ;
    let text = document.getElementById ( ' text ' ) ;
    upload.addEventListener('change', ( ) => {
        //initialize file reader
        let reader = new FileReader ( ) ;
        reader.readAsText (upload.files [ 0 ] ) ;
        reader.onload = function ( ) {
            text.innerHTML = reader.result ;
        } ;
    } ) ;
</script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. To add JavaScript Create a <script> tag.
  8. By using document.getElementById , we access both ‘input’ file and the ‘p’ tag by the Id name.
  9. Use .addEventListener tag to get an event to be done.
  10. To initialize the file reader create a variable named ‘ reader ‘ and use FileReader() tag to read the file that was uploaded.
  11. Use .readAsText to read the uploaded file as a string.
  12. .onload is used to load the object within the page.
  13. Using .result to Display the text file.

Conclusion :-

At last here in conclusion, here we can say that with this article’s help, we can read a text file in JavaScript.

I hope this article on read a text file in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials