Read a local text file using JavaScript

14-Sep-2024

S.no	Contents-topics
1	Introduction
2	File reader methods
3	HTML code

1:Introduction

HTML 5 provides a standard way to interact with local files with the help of File API. The File API allows interaction with single, multiple as well as BLOB files. The FileReader API can be used to read a file asynchronously in collaboration with JavaScript event handling. However, all the browsers do not have HTML 5 support so it is important to test the browser compatibility before using the File API. There are four inbuilt methods in the FileReader API to read local files:

2:File reader methods

FileReader.readAsArrayBuffer(): Reads the contents of the specified input file. The result attribute contains an ArrayBuffer representing the file’s data.
FileReader.readAsBinaryString(): Reads the contents of the specified input file. The result attribute contains the raw binary data from the file as a string.
FileReader.readAsDataURL(): Reads the contents of the specified input file. The result attribute contains a URL representing the file’s data.
FileReader.readAsText(): Reads the contents of the specified input file. The result attribute contains the contents of the file as a text string. This method can take encoding version as the second argument(if required). The default encoding is UTF-8.

3:HTML code

Also read:TOGGLE PASSWORD VISIBILITY USING JAVASCRIPT

HTML codeCopy

<!DOCTYPE html>

<html>

<head>

<title>Developer Corner Read Text File</title>

</head>

<body>

<input type="file" name="inputfile"

id="inputfile">

<br>

document.getElementById('inputfile')

.addEventListener('change', function() {

var fr=new FileReader();

fr.onload=function(){

document.getElementById('output')

.textContent=fr.result;

}

fr.readAsText(this.files[0]);

})

</script>

</body>

</html>

Output Of Text File

Tags: JavaScript,JavaScript,

Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.