Using AJAX to read local files

I'm a novice to AJAX and just want to confirm: if I have all my code in a folder on my desktop and I am using AJAX to output file content in a div in HTML, is it possible to access local files through AJAX or file should have to be on server?

I am just testing AJAX functionality for the first time and i am facing problem as its showing error "Access denied " in .js file



File Access is prohibited from the start, in any browser javascript implementation. Someone can disable that "security feature" in his browser manually. For instance, for Google Chrome you have to startup the executable with --disabled-web-security as commandline argument. Firefox can disabled that within it's about:config.

Anyway, you totally cannot rely on that of course if you're writting code for the public. But there is light at the end of the tunnel. The "new" Javascript File API is already available in Chrome, other vendors will follow soon I guess/hope. That API "officially" allows your script to read files on the local machine.


Javascript is work on client side but have limited access so it not able to access local files form the client machine.

So you require to palce you content on server than you can use ajax and get the data in you div to display the client.


If you just want it for testing you can try disabling web security on chrome and then it should work.


I hope its possible to access a file locally using Ajax, i tried it with mozilla firefox and worked well. I'd created 2 text files and paced in the same folder. Here is the code. Sorry if there is any mistake.

function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest(); //Not IE
    else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP"); //IE
    else {
        alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
var receiveReq = getXmlHttpRequestObject();     
function sayHello(fname) {
    if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {"GET", fname, true);
        receiveReq.onreadystatechange = handleSayHello; 
function handleSayHello() {
    if (receiveReq.readyState == 4) {
        document.getElementById('span_result').innerHTML = receiveReq.responseText;

Here is the html code
<select name="files" onchange="sayHello(this.value)">
<option value="">Select a file</option>
<option value="file.txt">file.txt</option>
<option value="file2.txt">file2.txt</option>
<option value="ajax.html">Ajax.html</option>
<p>Contents of the file will be displayed below</p>
<div id="span_result"></div>

For security reasons JavaScript's access to the file system on the client is restricted - consider whether you would want (somebody else's) JavaScript to read your sensitive documents.

Even when experimenting it's best to work with a realistic topology, serve things from the server that would be served from there in the real system.

It's really easy to set up a web server such as Apache to point to your development directory, so the "server" is just your desktop in disguise. Hence the edit/test cycle is really quick.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.