Get input file using javascript?

Question

I have this line in HTML:

<input class="input-file" type="file" id="input-recipe-pic"> 

After the user selects the file to upload and presses the submit button, I try to get the file that they selected from the file input tag above. How can I get a file with javascript to subsequently send it AJAX to avoid page reloading?

Answer 1

This was not possible without iframe hackers before the HTML5 file APIs. Using the HTML5 file API you can do

 $(".input-file").change(function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function() { alert(reader.result); }; reader.readAsText(file); }); 

Please note that this will only work in browsers that support HTML5 file APIs such as Chrome.

Answer 2

There are many boot connections you can use, for example, http://blueimp.github.com/jQuery-File-Upload/

You can go to the source code and see how it is done.

 <input type="file" id="myFile" /> $('#myFile').bind('change', function() { alert(this.files[0].size); });