Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to read a text file from server using JavaScript?

On the server, there is a text file. Using JavaScript on the client, I want to be able to read this file and process it. The format of the file on the server cannot be changed.

How can I get the contents of the file into JavaScript variables, so I can do this processing? The size of the file can be up to 3.5 MB, but it could easily be processed in chunks of, say, 100 lines (1 line is 50-100 chars).

None of the contents of the file should be visible to the user; he will see the results of the processing of the data in the file.

like image 682
Woody Avatar asked Dec 26 '10 06:12

Woody


People also ask

Can JavaScript read server files?

You cannot read server side data through Javascript unless you have a connection to the server. Whatever Javascript code that runs on the client's browser will remain on their browser only, even if both are ran on the same computer.

How do I read a text file in JavaScript?

Use the fs. readFileSync() method to read a text file into an array in JavaScript, e.g. const contents = readFileSync(filename, 'utf-8'). split('\n') . The method will return the contents of the file, which we can split on each newline character to get an array of strings.

Can JavaScript open a local file?

JavaScript cannot typically access local files in new browsers, but the XMLHttpRequest object can be used to read files. So it is actually Ajax (and not Javascript) which is reading the file.


2 Answers

You can use hidden frame, load the file in there and parse its contents.

HTML:

<iframe id="frmFile" src="test.txt" onload="LoadFile();" style="display: none;"></iframe> 

JavaScript:

<script type="text/javascript"> function LoadFile() {     var oFrame = document.getElementById("frmFile");     var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;     while (strRawContents.indexOf("\r") >= 0)         strRawContents = strRawContents.replace("\r", "");     var arrLines = strRawContents.split("\n");     alert("File " + oFrame.src + " has " + arrLines.length + " lines");     for (var i = 0; i < arrLines.length; i++) {         var curLine = arrLines[i];         alert("Line #" + (i + 1) + " is: '" + curLine + "'");     } } </script> 

Note: in order for this to work in Chrome browser, you should start it with the --allow-file-access-from-files flag. credit.

like image 146
Shadow Wizard Hates Omicron Avatar answered Oct 03 '22 07:10

Shadow Wizard Hates Omicron


Loading that giant blob of data is not a great plan, but if you must, here's the outline of how you might do it using jQuery's $.ajax() function.

<html><head> <script src="jquery.js"></script> <script> getTxt = function (){    $.ajax({     url:'text.txt',     success: function (data){       //parse your data here       //you can split into lines using data.split('\n')        //an use regex functions to effectively parse it     }   }); } </script> </head><body>   <button type="button" id="btnGetTxt" onclick="getTxt()">Get Text</button> </body></html> 
like image 30
Amjad Masad Avatar answered Oct 03 '22 08:10

Amjad Masad