I intend to have a link in my webpage which will open a local text file and display its contents. This is what I have tried so far:

<a href='#' onclick='readTextFile("file:///F:/folder1/abc.txt")' title='Summary'><h3>Summary</h3></a>

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

This is the error I am getting:

XMLHttpRequest cannot load file:///F:/folder1/abc.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

My webpage is running locally on a local server.

Is it even possible to open and read local files?Seems like something browsers should probably not allow.

I intend to have a link in my webpage which will open a local text file and display its contents. This is what I have tried so far:

<a href='#' onclick='readTextFile("file:///F:/folder1/abc.txt")' title='Summary'><h3>Summary</h3></a>

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

This is the error I am getting:

XMLHttpRequest cannot load file:///F:/folder1/abc.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

My webpage is running locally on a local server.

Is it even possible to open and read local files?Seems like something browsers should probably not allow.

• javascript

• oooh, no ... just re-read the question ... you can't do that, oh god please let it never be doable in any browser! – Jaromanda X Commented Mar 7, 2017 at 12:31
• In most browsers, this is possible only for resources inside the folder where the page lives, or in a child folder. – Pekka Commented Mar 7, 2017 at 12:31
• 2 @Pekka웃 - he wants to open file:/// from http:// !! – Jaromanda X Commented Mar 7, 2017 at 12:32
• @Jaromanda ah, indeed. No, that's not possible at all. – Pekka Commented Mar 7, 2017 at 12:33
• 1 yep @karansabhani – blackmiaool Commented Mar 12, 2017 at 15:41

4 Answers 4

For HTML5 pliant websites you can use the new APIs available with HTML5.

HTML5 FileReader interface can be used to asynchronously read a file through familiar JavaScript event handling. It provides the following functions:

• readAsText
• readAsBinaryString
• readAsDataURL
• readAsArrayBuffer

Please follow this treehouse blog (contains demo too) and also this for your reference.

new answer:

It is still possible.

1. Use chrome
2. Install tampermonkey extension
3. Check the checkbox to make it can access local files.
4. Add a script into it as below:

// ==UserScript==
// @name         read localfile
// @namespace    http://tampermonkey/
// @version      0.1
// @description  read localfile
// @author       blackmiaool
// @match        http://stackoverflow./*
// @match        https://stackoverflow./*
// @grant        GM_getResourceText
// @resource     b file://C:\Users\blackmiaool\the-path-of-the-file
// ==/UserScript==

(function() {
    'use strict';
    var a=GM_getResourceText("b");
    console.log("The file's content is ",a);
})();

Remember to correct the file path, and test it on this page.

old answer:

Sure it's possible. If your index.html file locates at "/some-path/index.html", just put your abc.txt at "/some-path/abc.txt". And change the "file:///F:/folder1/abc.txt" to "./abc.txt".

Simply "NO, You can't read any files from the server deployed locally on your machine." In order to access any resource, one must have the resource available on your sever. Where your current page is being served from.

The file need to be in your web application to link to it. Allowing javascript to access your machine outside the application is a security risk and is not allowed. A back end process can read the file then give you the results but you can not read directly from javascript to a file on your machine