Read input value type file doubt

Question

A question, why does it work:

$("input[type='file']")[0].files[0]

and that’s not?

$("input[type='file']").files[0] // TypeError: $(...).files is undefined

Answer 1

With Wallace replied, he returns a jQuery Object. Thus, you are accessing the first ( and probably unique, in your case ) DOM element that returned from the object.

You can access an element as follows:

$("input[type='file']")[0]

or

$("input[type='file']").get(0)

There is also the function .first(), which will return the first DOM element of the object returned by the selector:

$("input[type='file']").first()

NOTE: The . first() function will create a new jQuery Object with the first element.

@Edit

As the tip commented by Guilherme Lautert, can also access an index through the selector :eq():

$("input[type='file']:eq(0)")

Answer 2

When you do that $("input[type='file']")[0], you are accessing the object HTMLInputElement, which is native to javascript.

In this element, there is the property files.

Example:

HTMLInputElement.prototype.hasOwnProperty('files'); // true

In the case of $("input[type='file']") you are returning the instance the object of jQuery, who does not own this property.

Answer 3

Basically the same answer from Wallace, though I’ll explain it another way.

The .files is a native property of the Javascript DOM API, so it will only be accessible on when you use document.getElementById and document.querySelector, for example:

document.querySelector("input[type=file]").files

When you do it:

$("input[type=file]")[0] //ou .get(0)

You transform (extract) an object to GIFT, like I got caught up with document.querySelector, doing the .files be accessible.

So .files would only be accessible like this $(...).files if this property existed in jQuery.

Note: document.getElementsByName, document.getElementsByTagName and document.querySelectAll returns objects arrays then .files will only be available if you access one of the items in this array.

Is there a way to make this accessible, through the jQuery.fn. jQuery’s, it would be like this:

jQuery.fn.extend({
    "files": function() {
         var el    = this.get(0);
         var files = el ? el.files : false;
         return files ? files : [];
    }
});

And using it must be something like:

console.log($("input[type=file]").files());

Note that he will return one array with the files selected and only from the first element of the "jQuery object list".

Answer 4

Why Jquery will search for One or + occurrences of input[type='file'] , will soon list the results in a Object by the keys ([0][1][2],etc).