Read a local text file using Javascript

Question

I have read some of the previous questions on this topic but I really need to be 100% sure!

Is it possible to read from a .txt file on my local system and present it in my HTML-BODY?

I have tried several functions, here is one:

  function readFile (path) {
  var fso = new ActiveXObject('Scripting.FileSystemObject'),
      iStream=fso.OpenTextFile(path, 1, false);
  while(!iStream.AtEndOfStream) {
      document.body.innerHTML += iStream.ReadLine() + '<br/>';
  }        
  iStream.Close();
}
readFile("testing.txt");

The content of the file is simply around 100 words I want to read from the text file and display in my HTML-BODY.

Is this possible without having my own server?

Aminul · Accepted Answer · 2014-12-17 10:41:47Z

You can use a FileReader object to read text file here is example code:

  <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>
<script>
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!"
            }
        });
}

</script>

Here is the codepen demo

If you have a fixed file to read every time your application load then you can use this code :

<script>
var fileDisplayArea = document.getElementById('fileDisplayArea');
function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                fileDisplayArea.innerText = allText 
            }
        }
    }
    rawFile.send(null);
}

readTextFile("file:///C:/your/path/to/file.txt");
</script>

Is it possible to skip the "Select a file" option and instead define the file to be read in my code? This is actually what I need. Not the user should choose the file but I should.
@NGTHM4R3 yes I think readAsText() has an overloaded version that accepts the file encoding , just use it like this for example reader.readAsText(file, 'ISO-8859-1');
Hi, tried this piece of code but the value of readyState is always 0. Can someone help me with that?
@m_beta your request is in unsent state, have you missed the function call somehow
The second code snippet absolutely does not work and is also plagiarised from this (equally bad) answer

Pang · Accepted Answer · 2017-06-08 03:14:48Z

Please find below the code that generates automatically the content of the txt local file and display it html. Good luck!

<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript">

  var x;
  if(navigator.appName.search('Microsoft')>-1) { x = new ActiveXObject('MSXML2.XMLHTTP'); }
  else { x = new XMLHttpRequest(); }

  function getdata() {
    x.open('get', 'data1.txt', true); 
    x.onreadystatechange= showdata;
    x.send(null);
  }

  function showdata() {
    if(x.readyState==4) {
      var el = document.getElementById('content');
      el.innerHTML = x.responseText;
    }
  }

  </script>
</head>
<body onload="getdata();showdata();">

  <div id="content"></div>

</body>
</html>

how would i be able to use that content in a local variable? For example, if I wanted to var content = extractText() and later in window.onLoad() = function() { url: content , ...} - Would I do something like url: content.innerHTML to reference that response text?

Collectives™ on Stack Overflow

Read a local text file using Javascript

2 Answers 2

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Linked

Related