CODEWITHSUNDEEP
javascripthtmlio
user279185
user279185

Reputation: 133

Reading in a text file to display in HTML

I am just working on a web site for fun and I was wondering if you could use JavaScript to read in a local text file and then display it HTML. So for example if I had a text file saved with my project then could I write a function in JavaScript that reads the entire file and then just displays all that text within on the web page?

I've looked around and tried to find something that will do this, but I don't think I fully understand. I have:

function readFile(fileName){
   var fileRead = new ActiveXObject('Scripting.FileSystemObject');
   text = fileRead.OpenTextFile(fileName, 1, false, 0);

   while(!text.AtEndOfSteam){
       text += text.ReadLine();
    }

   text.Close();    
}

I don't know if this is will work or do what I want to do. So my question is, how do I use JavaScript to read in a text file, then display the contents of that text file on a webpage in HTML?

Upvotes: 1

Views: 33283

Answers (2)

Poornachander K
Poornachander K

Reputation: 621

<html>
  <head>
    <title>reading file</title>
   </head>
<body>


<input type="file" id="myFile">
<hr>
<!--<div style="width: 300px;height: 0px" id="output"></div>-->
<textarea style="width:500px;height: 400px" id="output"></textarea>

<script>
var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });

    reader.readAsBinaryString(myFile);
  }
});
</script>
  </body>
</html>

Upvotes: 0

Bertrand KHE
Bertrand KHE

Reputation: 136

You have to use the File API.

var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();
    
    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });
    
    reader.readAsBinaryString(myFile);
  }
});
<input type="file" id="myFile">

<div id="output"></div>

EDIT

After reading your comment, i think this is what you want. 

var output = document.getElementById("output");

$("a").on("click", function (e) {
  e.preventDefault();
  $.ajax(this.href).done(function(data) {
    output.textContent = data;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

<a href="link/to/file">Link to file</a>

Upvotes: 7

Related Questions