Read and display the text file contents upon click of button using Javascript

Question

On click of a button called result, I want to read and display a text file (which is present in my local drive location say: C:\test.txt) using Javascript function and display the test.txt file contents in a HTML text area.

I am new to Javascript,can anyone suggest the code for Javascript function to read and display the contents of .txt file?

Solution 1

An Ajax request to a local file will fail for security reasons.

Imagine a website that accesses a file on your computer like you ask, but without letting you know, and sends the content to a hacker. You would not want that, and browser makers took care of that to protect your security!

To read the content of a file located on your hard drive, you would need to have a <input type="file"> and let the user select the file himself. You don't need to upload it. You can do it this way :

<input type="file" onchange="onFileSelected(event)">
<textarea id="result"></textarea>

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var result = document.getElementById("result");

  reader.onload = function(event) {
    result.innerHTML = event.target.result;
  };

  reader.readAsText(selectedFile);
}

JS Fiddle

Solution 2

Using $.ajax() function: http://api.jquery.com/jQuery.ajax/

$(function(){
    $.ajax({
        url: "pathToYourFile",
        async: false,   // asynchronous request? (synchronous requests are discouraged...)
        cache: false,   // with this, you can force the browser to not make cache of the retrieved data
        dataType: "text",  // jQuery will infer this, but you can set explicitly
        success: function( data, textStatus, jqXHR ) {
            var resourceContent = data; // can be a global variable too...
            // process the content...
        }
    });
});

Comments

[M.chaudhry]

<script>window.open("C:test.txt")</script>

[blex]

For security reasons, your browser will not allow you to access the content of a file on your local drive and display it in your HTML unless you have an <input type="file"/> and let the user select it. Is that your situation?

[Fonzy]

You would need AJAX to do this

[Fr0zenFyr]

From your comments on solutions, it seems you got the thing working... So, I wonder why there is no accepted answer!!

[blex]

Unfortunately, this will fail in Google Chrome because it doesn't allow requests on local files. See this thread

[Dojo_user]

I think you got my question wrong. See here I want to provide the path of my text file(present in local drive say C:\text.txt or any) so that onclick of the button, it should read the text file from local disk and display the contents in the text area.Currently the code provides us a scope to manually browse and upload the file and display the contents in it. But what i want is it should display the content on button click action.

[blex]

@Dojo_user : I did understand your question correctly, but what you are asking is totally impossible in javascript due to browser security rules. And by the way, I do not upload the file, I just let the user select it, as required by browsers, then I display it. Believe me, I've tried before. You might have a solution with Flash. Please see this.

[blex]

Actually, it is not going to work in any browser, for a local file.

[blex]

Actually, Flash would also require the user to select the file. You don't have any other alternative. See this.