Question

85

Reading a text file using Javascript

rated 0 times [ 88] [ 3] / answers: 1 / hits: 39576 / 9 Years ago, tue, may 26, 2015, 12:00:00

The following code should read the content of a text file which is in the current directory upon load, and display it on the html page. I tried modifying by my self. But it does not give an output. Is there an easier way to get this result using another method? or please help figure out what is wrong with this code?

<html>

        <head>

            <meta http-equiv='Content-type' content='text/html;charset=UTF-8' >

            <script>

    function startRead()

    {

      // obtain input element through DOM 



    var file = document.getElementById(\file.txt).files[0]



      if(file)

        {

        getAsText(file);

      }

    }



    function getAsText(readFile)

    {

        var reader;

        try

        {

        reader = new FileReader();

        }catch(e)

        {

            document.getElementById('output').innerHTML = 

                Error: seems File API is not supported on your browser;

          return;

      }



      // Read file into memory as UTF-8      

      reader.readAsText(readFile, UTF-8);



      // Handle progress, success, and errors



      reader.onload = loaded;

      reader.onerror = errorHandler;

    }







    function loaded(evt)

    {

      // Obtain the read file data    

      var fileString = evt.target.result;

      document.getElementById('output').innerHTML = fileString;

    }



    function errorHandler(evt)

    {

      if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR)

        {

        // The file could not be read

            document.getElementById('output').innerHTML = Error reading file...

      }

    }

    //Start reading file on load

    window.addEventListener(load, startRead() { }, false);



            </script>

        </head>



        <body>



            <pre>

                <code id=output>

                </code>

            </pre>

        </body>

    </html>

Given below is the code which I modified to get the above code. My intention was. As I open the html file it would read the text file which is in the current directory and display the content.

<html>

    <head>

        <meta http-equiv='Content-type' content='text/html;charset=UTF-8' >

        <script>

function startRead()

{

  // obtain input element through DOM 



var file = document.getElementById(file).files[0];



  if(file)

    {

    getAsText(file);

  }

}



function getAsText(readFile)

{

    var reader;

    try

    {

    reader = new FileReader();

    }catch(e)

    {

        document.getElementById('output').innerHTML = 

            Error: seems File API is not supported on your browser;

      return;

  }



  // Read file into memory as UTF-8      

  reader.readAsText(readFile, UTF-8);



  // Handle progress, success, and errors



  reader.onload = loaded;

  reader.onerror = errorHandler;

}







function loaded(evt)

{

  // Obtain the read file data    

  var fileString = evt.target.result;

  document.getElementById('output').innerHTML = fileString;

}



function errorHandler(evt)

{

  if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR)

    {

    // The file could not be read

        document.getElementById('output').innerHTML = Error reading file...

  }

}

        </script>

    </head>



    <body>

        <input id=file type=file multiple onchange=startRead()>

        <pre>

            <code id=output>

            </code>

        </pre>

    </body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

raymondd

Add To Favorites

Follow

Total Points: 620

Total Questions: 112

Total Answers: 94

Location: Namibia

Member since Mon, Feb 21, 2022

2 Years ago

raymondd questions

1 Automatically adjust height of iframe using React Hooks

Thu, Apr 22, 21, 00:00, 3 Years ago

1 What's the proper location to store images in VueJS - public folder or assets folder?

Sat, Jul 11, 20, 00:00, 4 Years ago

1 Convert binary to blob url

Thu, Jul 9, 20, 00:00, 4 Years ago

1 Show Loading indicator on Bootstrap 4 (Modal) dialog

Thu, Apr 9, 20, 00:00, 4 Years ago

1 Script injected with insertAdjacentHTML() does not execute

Thu, Jul 25, 19, 00:00, 5 Years ago

View All

answered 9 Years ago desiraeleandrah · Accepted Answer

Try this snippet, I just tried and it works :)!

Live Demo (With Input File)

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) {

            var content = reader.result;

            //Here the content has been read successfuly

            alert(content);

        }

        

        reader.readAsText(file);	

    } else {

        fileDisplayArea.innerText = File not supported!

    }

});

<input type=file id=fileInput>

Without Input File

Function

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);

        }

And to test it

<a href=# onclick=readTextFile(&quot;file:///C:/test.txt&quot;)> Test </a>

Notice: I tried it, but it works only in firefox