Access the file contents from inside the callback function and display on console – jQuery

jQueryWeb DevelopmentFront End Technology

Let’s say the following is our file and we need to read this file using jQuery.

The name of the file details −


Following is the code −

 Live Demo

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//">
<script src=""></script>
<script src=""></script>
   <input type="file" id="readFileDemo" onchange="chooseFile()">
   function chooseFile() {
      dataFromMyFile = document.getElementById("readFileDemo").files[0];
      readDataFromFile = new FileReader();
      readDataFromFile.onload = () => {
         data = readDataFromFile.result;
         console.log("Your File Data is=");

To run the above program, save the file name “anyName.html(index.html)”. Right click on the file and select the option “Open with Live Server” in VSCode editor −


This will produce the following output on console −

Now you can choose the file from the system on clicking “Choose File”. Here, my file name is details. We uploaded the “details.txt” file −

The file contents on console −

Published on 09-Nov-2020 11:54:35