CODEWITHSUNDEEP
javascript
karansabhani
karansabhani

Reputation: 137

How do I open a local text file and display the contents in my browser?

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.

Upvotes: 2

Views: 12124

Answers (4)

blackmiaool
blackmiaool

Reputation: 5364

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.net/
// @version      0.1
// @description  read localfile
// @author       blackmiaool
// @match        http://stackoverflow.com/*
// @match        https://stackoverflow.com/*
// @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".

Upvotes: 2

Bharat Gupta
Bharat Gupta

Reputation: 2696

For HTML5 compliant 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.

Upvotes: 3

Joe ONeil
Joe ONeil

Reputation: 130

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

Upvotes: 0

Nitesh Goyal
Nitesh Goyal

Reputation: 586

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.

Upvotes: 0

Related Questions