使用Javascript读取本地JSON文件

Question

I am trying to write a code to read local JSON file in Javascript. The code I have written is given below:

    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'file:///C:/tmp/abc.json', true);
    xobj.onreadystatechange = function() {
        if (xobj.readyState == 4 && xobj.status == "200") {

            // .open will NOT return a value but simply returns undefined in async mode so use a callback
            callback(xobj.responseText);

        }
    }
    xobj.send(null);

Also, I am running Chrome browser using below command:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C://Chrome dev session" --disable-web-security --allow-file-access-from-files

The code isn't working and I am receiving xobj.status as 0 . I have inspected Network tab and found out that xhr status for abc.json is shown in red as 'canceled' .

Please let me know if I am mistaking anything.

Answer 1

The XMLHttpRequest will fetch resources from a server.

Your path

 'file:///C:/tmp/abc.json'

is not a url which is being served by a server

Moreover, with JavaScript you cannot have access to the operating system's storage drive.

To read a local file, you need to use a file uploader and read the contents of the uploaded file via the File API.

Try this

https://www.html5rocks.com/en/tutorials/file/dndfiles/