0

If I upload data (say a text file) from my local computer, with this function

var button = document.getElementById('myFile');
<p id = "out">The content of the file is</p>
<input type = "file" id = "myFile" style="margin-top:5%;">

How do I retrieve data from the uploaded file? I'm thinking about the simplest case which can be a text file to be appended to a div.

Muteking
  • 1,465
  • 5
  • 18
  • 31
  • upload it first to server, then parse it on server side (u may upload image, video and so on). Then create PHP (for example) or any other ajax handler that returns file content and call this action via JS – Evgeniy Dec 11 '14 at 09:51
  • 2
    @Evgeniy Not necessarily so: modern browsers have `FileReader` that [allows the browser to parse uploaded files](http://www.html5rocks.com/en/tutorials/file/dndfiles/). However, sometimes it might not be a good idea to read the entire file into memory—if it's too large you'll risk crashing the browser due to memory overflow. – Terry Dec 11 '14 at 09:53
  • @Terry, oh, thx, didn't know about `FileReader` – Evgeniy Dec 11 '14 at 09:56
  • @Evgeniy Of course, it is not supported across *all* browsers. If OP wants total cross-browser compatibility, your solution might be a better way :) but since OP only cited the example of a text file, `FileReader` is sufficient. Also, the case is different if OP wants to parse other kinds of files. – Terry Dec 11 '14 at 09:56

1 Answers1

-1

try this with jquery :

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

or

$('input[type="file"]').change(function(){
  console.log($(this).closest('.browse-wrap').next('.upload-path').text(this.value));
});
Mimouni
  • 3,564
  • 3
  • 28
  • 37
  • why -1 ,can you comment ! – Mimouni Dec 11 '14 at 09:54
  • 1
    You're using browser prefixed properties without covered the cross-browser or standard cases and the code you've provided won't give access to the *content* of the file anyway. – Quentin Dec 11 '14 at 10:15