jQuery read text file from file system

Question

I am trying to read a text file using jquery  like this      LOAD file and split line by line and append divs   get  myFile txt   function data            var lines   data split   n           each lines  function n  elem               myContainer   append   lt div gt     elem     lt  div gt                   In chrome  I am getting   XMLHttpRequest cannot load file    C  myPath myFile txt  Origin null is not allowed by Access-Control-Allow-Origin    Firefox shows no error but the code is not executed  I have breakpoints in firebug and the anonymous function never runs    Any help appreciated   EDIT   had to    use the file full path    launch chrome with  --allow-file-access-from-files    now it s working OK

User · Answer

This is working fine in firefox at least.

The problem I was facing is, that I got an XML object in stead of a plain text string. Reading an xml-file from my local drive works fine (same directory as the html), so I do not see why reading a text file would be an issue.

I figured that I need to tell jquery to pass a string in stead of an XML object. Which is what I did, and it finally worked:

function readFiles()
{
    $.get('file.txt', function(data) {
        alert(data);
    }, "text");
}

Note the addition of '"text"' at the end. This tells jquery to pass the contents of 'file.txt' as a string in stead of an XML object. The alert box will show the contents of the text file. If you remove the '"text"' at the end, the alert box will say 'XML object'.

User · Answer

this one is working            get  1 txt   function data                  var fileDom     data                var lines   data split   n                   each lines  function n  elem                        myContainer   append   lt div gt     elem     lt  div gt

User · Answer

specify the full path of the file url

User · Answer

As long as the file does not need to be dynamically generated  e g   a simple text or html file  you can test it locally WITHOUT a web server - just use a relative path

User · Answer

This doesn t work and it shouldn t because it would be a giant security hole   Have a look at the new File System API  It allows you to request access to a virtual  sandboxed filesystem governed by the browser  You will have to request your user to  upload  their file into the sandboxed filesystem once  but afterwards you can work with it very elegantly   While this definitely is the future  it is still highly experimental and only works in Google Chrome as far as CanIUse knows

User · Answer

You can t do this without the WEB SERVER    Chrome sends XMLHttpRequest to the system that looks something like this  GET  myFile txt HTTP 1 1   And the operating system is not listening on port 80 to receive this  And even if it is  it must implement HTTP protocol to communicate with the browser     To get this working  you must have WEB SERVER installed on your system  that will listen on port 80 and make your files available through a HTTP connection  thus making your code runnable

User · Answer

You can t load a file from your local filesystem  like this  you need to put it on a a web server and load it from there  On the same site as you have the JavaScript loaded from   EDIT  Looking at this thread  you can start chrome using option --allow-file-access-from-files  which would allow access to local files

User · Answer

Something like this is what I use all the time  No need for any base64 decoding    lt html gt   lt head gt   lt script gt        window onload   function event            document getElementById  fileInput   addEventListener  change   handleFileSelect  false                  function handleFileSelect event            var fileReader   new FileReader            fileReader onload   function event                  accessKeyField   val event target result                     var file   event target files 0           fileReader readAsText file           document getElementById  fileInput   value   null           lt  script gt   lt  head gt   lt body gt   lt input type  file  id  fileInput  style  height  20px  width  100px   gt   lt  body gt   lt  html gt

User · Answer

If you include a file input box you can access the file as a base64 encoded string by using the FileReader object  If it s a text file a simple base64 decode will work to get the text   Assuming the following HTML    lt input type  file  id  myfile    gt    You can access using the following JQuery JS   var file       myfile   get 0  files 0   var reader   new FileReader    reader onload   function  e          get the file result  split by comma to remove the prefix  then base64 decode the contents     var decodedText   atob e target result split      1          show the file contents     alert decoded      reader readAsDataURL file

User · Answer

A workaround for this I used was to include the data as a js file  that implements a function returning the raw data as a string   html    lt  DOCTYPE html gt   lt html gt    lt head gt     lt script src  script js  gt  lt  script gt     lt script type  text javascript  gt      function loadData              getData   will return the string of data          document getElementById  data   innerHTML   getData   replace   n     lt br gt              lt  script gt   lt  head gt    lt body onload  loadData    gt     lt h1 gt check out the data  lt  h1 gt     lt div id  data  gt  lt  div gt   lt  body gt    lt  html gt    script js      function wrapper  just return the string of data  csv etc  function getData          return  look at this line of data n  oh  look at this line      See it in action here- http   plnkr co edit EllyY7nsEjhLMIZ4clyv p preview The downside is you have to do some preprocessing on the file to support multilines  append each line in the string with   n

[jquery] jQuery: read text file from file system

Examples related to jquery

Examples related to file

Examples related to filesystems

Examples related to get