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 ?

Ashwin Hegde
  • 1,733
  • 4
  • 19
  • 49
  • possible duplicate of [How to get the full path of the file from a file input](http://stackoverflow.com/questions/4176377/how-to-get-the-full-path-of-the-file-from-a-file-input) – Quentin May 23 '13 at 09:35
  • So you still can't get the path but you can get the file's content? – HMR May 23 '13 at 09: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. – Ashwin Hegde May 23 '13 at 09: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 '13 at 10:01
  • O! Yes...you are correct. So there is no alternative for now! Thanks – Ashwin Hegde May 23 '13 at 10:07
  • @Ashwin if you want to display the selected file by user in a div, it is possible. What is impossible is to have acess to the file directory – DmitryK May 23 '13 at 11:00
  • ok. I got that. Thanks – Ashwin Hegde May 23 '13 at 11:07
  • anyway, here is some code-example: http://jsfiddle.net/v4Vuu/ try in localhost(it doesn't work in jsfiddle because you can't upload files to it) – DmitryK May 23 '13 at 11:14
  • I have already done this. Thanks – Ashwin Hegde May 23 '13 at 11:18
  • The following documentation in url might help if you want to deal with File System using JavaScript. http://www-archive.mozilla.org/js/js-file-object.html – Ashwin Hegde Jun 05 '13 at 04:58

2 Answers2

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.

Majid Kalkatechi
  • 691
  • 7
  • 15
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

chaity
  • 163
  • 2
  • 11