Jquery input.files equivalent

Question

I have a simple html form with a single file upload input. (jsfiddle)

In the past, I have accessed the file selected by the user using input.files, however I am at a loss as to how to do this with JQuery;

Code:

$(function () {     $("#cmdSubmit").bind("click", function () {         var file = document.getElementById("fileInput").files[0];         alert(file); //A          file = $("#fileInput").val();         alert(file); //B          file = $("#fileInput").files[0];         alert(file); //C      });         });​ 

Option A give me what I expect, a file object. However, option B simply gives me the name of the uploaded file, and (as far as I can tell) not the file itself.

Option C shows that files is undefined.

What is the Jquery equivalent of input.files?

Note: I have no objection to using native javascript; but given that I am using JQuery throughout the rest of this project I'd prefer to use it here as well if possible.

Answer 1

You have to access the element. Try:

file = $("#fileInput")[0].files[0]; alert(file); //C 

or (thank you Jack)

file = $("#fileInput").prop('files')[0]; alert(file); 

Fiddle

Answer 2

Try the below code

var file = $("#fileInput").get(0).files[0];  alert(file); 

Thanks