Last Updated : Feb 13, 2023
In order to do that we will use FileReader() function. We will understand this by an example.
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- 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.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- By using document.getElementById , we access both ‘input’ file and the ‘p’ tag by the Id name.
- Use .addEventListener tag to get an event to be done.
- To initialize the file reader create a variable named ‘ reader ‘ and use FileReader() tag to read the file that was uploaded.
- Use .readAsText to read the uploaded file as a string.
- .onload is used to load the object within the page.
- Using .result to Display the text file.