Submitted by razormist on Monday, October 10, 2022 - 21:39.

Introduction

In this tutorial we will create a How to Read Text File in JavaScript. This tutorial purpose is to show you how to open and read a text file. This tackle all the needed functionalities that will allow you display the content of the text file. I will provide a sample program to show you the actual coding for this tutorial.

This tutorial is surely easy to create just follow the instruction and you will be good. This program can be use to any part of your on working program if you need to load some text file content. I will do my best to give you the easiest and simplest way of creating this program How to Read Text File. So let's do the coding

What is JavaScript ?

JavaScript is a side scripting language that enables you to create a dynamically content, control multimedia, animating objects, etc. The primary use of JavaScript is to build an interactive web-based applications. It can easily manipulate html and css coding script by accessing its element attribute. Most of the famous website use JavaScript in order to provide stunning and interactive experience such as facebook, youtube, google, etc.

Before we get started:

This is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will display buttons and a textarea that will upload the text content. To create this simply copy and write it into your text editor, then save it as index.html.

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8"/>
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://www.sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="container-fluid">   
                <div class="row">
                        <div class="col-md-3"></div>
                        <div class="col-md-6 well">
                                <h3 class="text-primary">How to Read Text File in JavaScript</h3>
                                <hr style="border-top: 1px SOLID #8c8b8b;"/>
                                <textarea id="output" readonly="readonly" style="width:100%; height:300px;"></textarea>
                                <input type="file" name="inputfile" id="inputfile">
                                <br />
                                <button onclick="upload()">Upload</button>
                        </div>
                </div>
        </div>  
</body>
<script src="js/script.js"></script>
</html>

Creating JavaScript Function

This is where the main function of the application is. This code will load the content of the text file in the textarea after being uploaded. To do this just copy and write these block of codes inside the text editor and save it as script.js.

function upload(){
        
        var file =document.getElementById('inputfile');
        var fr=new FileReader();
        fr.onload=function(){
                document.getElementById('output').innerHTML=fr.result;
        }
        
        fr.readAsText(file.files[0]);
        
}

In this code we will first create a method that will be called by the html button with the onclick function. We will now bind and target the input file attributes in order to get the details of the uploaded file. Then we use the FileReader() function to read the content of the file.

After reading the text file we will now try to load the content into the textarea using the onload function. This will allow you to load any text file content you uploaded in the textarea.

Output:

The How to Read Text File in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Read Text File in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment

748 views