To display text from a txt file using javascript

Question

How to read text from a txt file with one button to browse the file and other button to display text. Pls help me in getting the code. i have tried many codes but othing worked. some code was like this. Thanks in advance

<!DOCTYPE html>
<html>
  <head>
    <title>reading file</title>
    <script type="text/javascript">

        var reader = new FileReader();

        function readText(that){

            if(that.files && that.files[0]){
                var reader = new FileReader();
                reader.onload = function (e) {  
                    var output=e.target.result;
                    //process text to show only lines with "@":             
            output=output.split("\n").filter(/./.test, /\@/).join("\n");

                document.getElementById('main').innerHTML= output;
                };//end onload()
                reader.readAsText(that.files[0]);
            }//end if html5 filelist support
        } 
</script>
</head>
<body>
    <input type="file" onchange='readText(this)' />
    <div id="main"></div>
  </body>
</html>

you cannot read from files from JavaScript.Need to use Ajax. — Ankit Tyagi
– Ankit Tyagi, Commented Oct 29, 2013 at 11:58

Andreas Louv · Accepted Answer · 2013-10-29 12:00:32Z

1

You should properly read an article like this: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Dont think this line is working properly:

output=output.split("\n").filter(/./.test, /\@/).join("\n");

Try changing it to:

output=output.split("\n").filter(function(l) {
    //return /^\@/.test(l); // Starting with @
    return l.indexOf('@') > -1; // Containing @
}).join("\n");

It would be interesting to see if this would work as well:

output=output.split("\n").filter(/\@/.test.bind(/\@/)).join("\n");

The second arguments passed to the .filter method is the context:

array.filter(callback[, thisObject])

answered Oct 29, 2013 at 12:00

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md Ashaduzzaman · Accepted Answer · 2013-10-29 12:33:37Z

0

Get the input file, use FileReader() to read it,on file load get text that matches the pattern. Finally display it through "main" div. Should work..

HTML :

<input id="fileInput" type="file"/>
<div id="main"></div>

jQuery :

$(function(){
        $("#fileInput").change(function(e){
            var myFile = e.target.files[0];
            var reader = new FileReader();
            reader.onload = function(e){
                var output = e.target.result;
                output=output.split("\n").filter(/./.test, /\@/).join("\n");
                $("#main").text(output);
            };
            reader.readAsText(myFile)
        });
    }
)

Demo

edited Oct 29, 2013 at 12:33

answered Oct 29, 2013 at 12:16

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

2 Comments

kumar_salumuri Over a year ago

Actually i am new to javascript. so could u pls give me full code at a place so that I can run and understand better.

Md Ashaduzzaman Over a year ago

I've also posted the demo on the bottom part of my answer named Demo.

Collectives™ on Stack Overflow

To display text from a txt file using javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related