24

I have following code to read file through HTML5 File API. I have uploaded the file via input=file element. Following is the code block.

<input type="file" id="files" name="file" />
<button id="readFile">Read File</button>
<output id="content"></output>

<script>

function readFile() 
{
    /* Get the reference of the inpout element. */
    var files = document.getElementById('files').files;
    console.log(files);

    if (!files.length) 
    {
      alert('Please select a file!');
      return;
    }

    /* Reading the first file selected. You can process other files similarly in loop. */
    var file = files[0];

    /* Instantiate the File Reader object. */
    var reader = new FileReader();

    /* onLoad event is fired when the load completes. */
    reader.onload = function(event) {
        document.getElementById('content').textContent = event.target.result;      
    };

    /* The readAsText method will read the file's data as a text string. By default the string is decoded as 'UTF-8'. */
    reader.readAsText(file);
}

document.getElementById('readFile').addEventListener('click', function(event) {
     readFile();
  }, false);

</script>

What if I don't want to uploaded the file and provide filepath via input=type element to HTML5: File API to read the file and display it?

I know that the HTML5: File API don't take direct file path. Is there any solution ?

10
  • possible duplicate of How to get the full path of the file from a file input
    – Quentin
    May 23, 2013 at 9:35
  • So you still can't get the path but you can get the file's content?
    – HMR
    May 23, 2013 at 9:40
  • 1
    Guys, I am not asking to get the path from input=file. I have already have file path in some variable. I just want to use that file path with HTML5: File API to read that respected file and display its content on some div or textarea... ok Let me make few changes to my Question. May 23, 2013 at 9:51
  • 9
    You can’t just read any file with the HTML5 File API – that would be a big security hole. The user has to select the file themselves.
    – CBroe
    May 23, 2013 at 10:01
  • O! Yes...you are correct. So there is no alternative for now! Thanks May 23, 2013 at 10:07

2 Answers 2

27

For Security reason, the browsers does not allow access to absolute path & file systems directly to Javascript. You can only get the file name by calling the 'val()' function in javascript and nothing more.

So don't waste your time.

0

Latest version of IE return the complete absolute path of your file in the textbox. You may want to use: var filePath = document.getElementById("myFile").value; to get the absolute path

P.S. tried only on IE 11

1
  • Have you tried in latest chrome/firefox/safari? Can I still get path?
    – chovy
    Nov 13, 2015 at 19:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.