Javascript how to read local file?

Question

I am trying to read a local file from the server. I have been “searching” for a long time about this topic, and some say that this is impossible, while others can do it. During this search, I found this script:

Read the file using xmlhttprequest

If the HTML file with your javascript application was saved to disk, this is an easy way to read in the data file. Writing is more complex and requires either an ActiveX object (IE) or XPCOM (Mozilla).

fname - relative file path

callback - function for calling with file text

function readFileHttp(fname, callback) { xmlhttp = getXmlHttp(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4) { callback(xmlhttp.responseText); } } xmlhttp.open("GET", fname, true); xmlhttp.send(null); } 

Returns xmlhttp request object with cross browser

 function getXmlHttp() { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp == null) { alert("Your browser does not support XMLHTTP."); } return xmlhttp; } 

But I don’t know how to use it, and what should the callback function look like? Could you provide some sample code using these functions?

Answer 1

The ability to read a local file from your browser will be a serious security breach - I don’t like the idea that any site I visit can run code in my browser that will read files from my hard drive. Usually ajax requests are limited to the domain, from which the page was created. (However, you can work around this to some extent using methods such as JSONP.) Most browsers will not allow you to read local files, even if the page originated from your local file system.

The other methods mentioned should allow you to read files from a domain (even if it is localhost), but not directly from your file system.

Answer 2

With javascript, you can only read files that are publicly displayed on your server. It is like opening it in your browser ...

I suggest using the jQuery library for this, the ajax request with this is much simpler and is supported by all major browsers:

http://api.jquery.com/jQuery.get/

for example, you can do it like this:

 $.get('/content/test.html', function(data) { alert(data); }); 

Answer 3

Locate the activeX script below to read the local file. (works fine in IE).

  var fso = new ActiveXObject("Scripting.FileSystemObject"); //specify the local path to Open var file = fso.OpenTextFile("C:\\your path\\ filename", 1); var fileContent = file.ReadAll(); file.Close(); //Parse the contents // ex: if the content is in JSON format var obj = eval('(' + fileContent+ ')'); for (var i = 0; i < obj.length; i++) { //Access each element alert(obj[i].name); } 

Answer 4

The code below will scan the file and copy the contents into the text box:

  <input type="file" id="fileinput" /> <script type="text/javascript"> function readSingleFile(evt) { //Retrieve the first (and only!) File from the FileList object var f = evt.target.files[0]; if (f) { var r = new FileReader(); r.onload = function(e) { var contents = e.target.result; alert( "Got the file.\n" +"name: " + f.name + "\n" +"type: " + f.type + "\n" +"size: " + f.size + " bytes\n" + "starts with: " + contents.substr(1, contents.indexOf("\n")) ); document.getElementById('area').value= contents; } r.readAsText(f); } else { alert("Failed to load file"); } } document.getElementById('fileinput').addEventListener('change', readSingleFile, false); </script> <textarea rows=20 id="area"></textarea> 

Answer 5

The function you pass as the callback should contain code that actually processes the results of your initial ajax call. For example, in its simplest way:

 alert("RESPONSE: " + xmlhttp.responseText; 

However, we need to clarify what you are trying to do: read the file that is stored on the server? If so, this target file should be accessible from the Internet (so that you can pass your URL to your ajax call), otherwise your code just won't work.