4

I want to read a local text file from my local html file, so I tried to follow the solution in this thread Javascript - read local text file but the suggested solution does not work for me either:

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;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

When I call the function readTextFile("file:///D:/test/text.txt"); no error does show up in firebug but no alert is shown neither. I use Windows und Firefox 51.0.1 (64-Bit). I don't want to use the function FileReader() in combination with a button <input type='file' onchange='openFile(event)' ... since the text file needs to be read automatically when loading the page. So how can I make work the solution above?

Reading the thread linked it looks like others also have problems with that solution although the thread is marked as solved.

Community
  • 1
  • 1
Markus
  • 81
  • 1
  • 2
  • 7
  • 1
    Everything is saved on my computer. Reading the thread other people couldn't solve the problem neither although the thread is marked as solved. – Markus Feb 07 '17 at 11:21
  • 1
    Why not use FileReader and the related API? I've used it before, it works. – Tim Consolazio Feb 07 '17 at 11:26
  • 2
    _“Reading the thread other people couldn't solve the problem neither although the thread is marked as solved”_ – That doesn’t change what the underlying result of the other discussion is: You can not just read local files willy-nilly, because that would be a huge security issue. You need user interaction to let them select the file first. – CBroe Feb 07 '17 at 11:27

3 Answers3

9

Complete HTML and JavaScript file as an example for reading client side data files. Client side files can only be accessed by the FileReader, specifying a user selected file.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
                function loadFile(o)
                {
                    var fr = new FileReader();
                    fr.onload = function(e)
                        {
                            showDataFile(e, o);
                        };
                    fr.readAsText(o.files[0]);
                }

                function showDataFile(e, o)
                {
                    document.getElementById("data").innerText = e.target.result;
                }
            </script>

        </script>
    </head>
    <body>
        Select file to read <input type="file" onchange="loadFile(this)">
        <pre id="data"></pre>
    </body>
</html>
Balazs Vago
  • 601
  • 5
  • 7
2

As a general rule, it's not possible to access the local file system from JavaScript, so your code example shouldn't and couldn't work because of browser security.

However, there's the File and FileReader API which would allow you to read the contents of a file from an <input type="file" /> and is, in reality, your only option for this sort of thing - You could use FileReader.readAsText() to access the files contents. This is a good resource for further information:

https://www.html5rocks.com/en/tutorials/file/dndfiles/

edcs
  • 3,847
  • 2
  • 33
  • 56
  • Ok, thanks for your explanation. So i don't see why the creator of the linked thread writes "got it to work on browser [..]". In consequence using the function FileReader() and defining the variable event and using `` won't work either? – Markus Feb 07 '17 at 11:33
  • 1
    FYI If you are targeting anything below IE11, then FileReader isn't available to you : http://caniuse.com/#search=FileReader without a SHIM – Ben Temple-Heald Feb 07 '17 at 11:34
  • @Markus - it's an old question and it's the sort of thing that probably worked in the past but has since been deprecated due to the security issues it introduces. You don't want a website to be able to 'steal' files from your computer! – edcs Feb 07 '17 at 11:36
1

The easiest way to solve my problem is to change the text file to a .js file, save it in the same folder and include it in the html file by <script src="test.js"></script>

Markus
  • 81
  • 1
  • 2
  • 7