Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reading client side text file using Javascript

I want to read a file (on the client side) and get the content in an array. It will be just one file. I have the following and it doesn't work. 'query_list' is a textarea where I want to display the content of the file.

<input type="file" id="file" name="file" enctype="multipart/form-data"/>      <script>        document.getElementById('file').addEventListener('change', readFile, false);         function readFile (evt) {            var files = evt.target.files;            var file = files[0];            var fh = fopen(file, 0);           var str = "";           document.getElementById('query_list').textContent = str;           if(fh!=-1) {              length = flength(fh);                      str = fread(fh, length);                   fclose(fh);                               }             document.getElementById('query_list').textContent = str;         }       </script> 

How should I go about it? Eventually I want to loop over the array and run some SQL queries.

like image 391
y2p Avatar asked Feb 09 '11 21:02

y2p


2 Answers

If you want to read files on the client using HTML5's FileReader, you must use Firefox, Chrome or IE 10+. If that is true, the following example reads a text file on the client.

your example attempts to use fopen that I have never heard of (on the client)

http://jsfiddle.net/k3j48zmt/

   document.getElementById('file').addEventListener('change', readFile, false);     function readFile (evt) {        var files = evt.target.files;        var file = files[0];                   var reader = new FileReader();        reader.onload = function(event) {          console.log(event.target.result);                    }        reader.readAsText(file)     } 

For IE<10 support you need to look into using an ActiveX Object like ADO.Stream Scripting.FileSystemObject http://msdn.microsoft.com/en-us/library/2z9ffy99(v=vs.85).aspx but you'll run into a security problem. If you run IE allowing all ActiveX objects (for your website), it should work.

like image 169
Juan Mendes Avatar answered Oct 04 '22 22:10

Juan Mendes


There is such thing as HTML5 File API to access local files picked by user, without uploading them anywhere.

It is quite new feature, but supported by most of modern browsers.

I strongly recommend to check out this great article to see, how you can use it.

There is one problem with this, you can't read big files (~400 MB and larger) because straight forward FileAPI functions attempting to load entire file into memory.

If you need to read big files, or search something there, or navigate by line index check my LineNavigator, which allows you to read, navigate and search in files of any size. Try it in jsFiddle! It is super easy to use:

var navigator = new FileNavigator(file);      navigator.readSomeLines(0, function linesReadHandler(err, index, lines, eof, progress) {         // Some error     if (err) return;      // Process this line bucket     for (var i = 0; i < lines.length; i++) {         var line = lines[i];          // Do something with it     }      // End of file     if (eof) return;      // Continue reading     navigator.readSomeLines(index + lines.length, linesReadHandler); }); 
like image 21
Anton Avatar answered Oct 04 '22 23:10

Anton