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-17T10:41:47.023

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. — M. El-Set, Dec 17 '14 at 10:35
@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');` — Aminul, Jan 05 '18 at 08:59
Hi, tried this piece of code but the value of `readyState` is always `0`. Can someone help me with that? — m_beta, Apr 13 '20 at 09:34
@m_beta your request is in [unsent state](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState), have you missed the function call somehow — Aminul, Apr 13 '20 at 12:22
The second code snippet absolutely does not work and is also plagiarised from [this (equally bad) answer](https://stackoverflow.com/a/14446538/283366) — Phil, Jun 05 '20 at 01:05

score 1 · Answer 2 · edited Jun 08 '17 at 03:14

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? — dko, Jan 24 '22 at 18:51

Read a local text file using Javascript

2 Answers2

Linked

Related