Loading file from local directory?

Question

I'm using ajax call to load data to my application. its working fine for paths like this

../../DataSource/newJson.json

but it doesn't work for the path like this.

C:\Users\acer\Desktop\NewJson.json

I have searched a lot but i didn't find any proper solutions to my question. I'm using the following code to load the file from the local directory.

 <button id="loadData">update new Json</button>
 <input type="file" id="newJson" value="file" />

Here is my ajax call:

$("#loadData")[0].onclick= function (e){ 
                $.holdReady(true);
                var request = $.ajax({
                    type: "GET",
                    dataType: 'json',
                    url: $("#newJson").val(),
                    success: function (data) {
                     alert('success')
                    },
                    error: function (data, dat1, error) {
                     alert(error)
                    }
                });
            };

Any suggestions should be appreciated.

`("#loadData")[0].onclick = e => { ` if it's JavaScript it's a syntax error. — pawel, Sep 19 '13 at 06:38

score 1 · Answer 1 · answered Sep 19 '13 at 06:44

There are several reasons that this won't work:

XMLHttpRequest isn't allowed access to arbitrary third party URLs (and since the URL is on the visitor's hard disk and not your website, it is a third party URL).
The full path of a file input is often concealed by browsers (because the directory structure of a visitor's hard disk is none of a website's business)
file:// URIs do not use exactly the same syntax as local directory paths

If you want to access files selected by the user using a file input, then use the Files API (but note limited browser support).

Also should mention that ajax isn't allowed on local files even if it's first party, not third party (both the HTML page and the json file are on the same disk, no web server). — slebetman, Sep 19 '13 at 06:57

pawel · Answer 2 · 2013-09-20T09:00:50.643

What browsers do you need to support? For modern browsers you can use HTML5 File API. For browsers that don't support it one option is a round-trip to a server (upload the file and return its contents), or a polyfill like https://github.com/Jahdrien/FileReader

An example using File API: (fiddle)

// check for support
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // event handler to fire when file input changes
  function handleFileSelect(evt) {
    var file = evt.target.files[0],
        reader = new FileReader(),
        contents;
      if( file ){
         reader.onload = function(f){
            contents = f.target.result;
            console.log( contents ); // here you'd use JSON.parse on the contents
         };
         reader.readAsText(file);
      }
  }
  // attach the event listener. It'll fire immediately, without clicking on the other button.
  document.getElementById('newJson').addEventListener('change', handleFileSelect, false);
} else {
 console.log( 'File API not supported, sorry' )   
}

Learn more: http://www.html5rocks.com/en/tutorials/file/dndfiles/

thanks its working fine in ie 10. but it doesn't work in ie 9.. how can i use it in ie9. — Karthi Keyan, Sep 20 '13 at 08:47
@karthik maybe you could try to find a polyfill for older browsers. Here's one, but I haven't personally tested it: https://github.com/Jahdrien/FileReader — pawel, Sep 20 '13 at 08:59

Loading file from local directory?

2 Answers2

Linked