Read Text File And Display in HTML Using JavaScript

Read Text File And Display in HTML Using JavaScript
Code Snippet:HTML5 FileReader API Demo: Text
Author: Matt West
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 1,181
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code enhances your HTML webpage by enabling it to read a selected text file and display its content dynamically. The code utilizes the FileReader API to handle the selected file, checks if it’s a text file, and then renders the content in the designated HTML area. This functionality allows you to effortlessly showcase text files on your webpage, offering a seamless way to share and present textual information.

You can use this code on websites where you want users to interactively view text files. It’s handy for sharing documents, instructions, or any text-based content. One major benefit is its simplicity—users can select a file, and it promptly displays the text on the webpage, making information easily accessible without additional downloads or plugins.

How to Read Text File and Display In HTML Using JavaScript

1. Start by creating an HTML file and include the necessary structure. Copy the following HTML code into your <body> section. This establishes a basic webpage with a file input element and an area to display text.

<div id="page-wrapper">

		<h1>Text File Reader</h1>
		<div>
			Select a text file: 
			<input type="file" id="fileInput">
		</div>
		<pre id="fileDisplayArea"><pre>

	</div>

2. Now, copy the CSS code into your <style> or external stylesheet. This ensures a clean and visually appealing layout for your file reader.

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  
}

#page-wrapper {
  width: 600px;
  background: #FFF;
  padding: 1em;
  margin: 1em auto;
  min-height: 300px;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1 {
	margin-top: 0;
}

img {
  max-width: 100%;
}

#fileDisplayArea {
  margin-top: 2em;
  width: 100%;
  overflow-x: auto;
}

3. Finally, copy the following JavaScript code into a <script> tag or an external JavaScript file. This script allows your webpage to read and display the content of a selected text file.

window.onload = function() {
		var fileInput = document.getElementById('fileInput');
		var fileDisplayArea = document.getElementById('fileDisplayArea');

		fileInput.addEventListener('change', function(e) {
			var file = fileInput.files[0];
			var textType = /text.*/;

			if (file.type.match(textType)) {
				var reader = new FileReader();

				reader.onload = function(e) {
					fileDisplayArea.innerText = reader.result;
				}

				reader.readAsText(file);	
			} else {
				fileDisplayArea.innerText = "File not supported!"
			}
		});
}

That’s all! hopefully, you have successfully created a simple tool to read text files and display them in HTML. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X