document.getElementById的工作原理是什么，但jquery没有？

Question

This question might seem elementary to some but I can't get my head around it. I am working on a XMLHttpRequest Ajax file upload. the first step is to selected the fileUpload element that is on my page and for some reason javascript works but not query, here's the following two lines:

var fileInput = $('#the-file'); //doesn't work
var fileInput = document.getElementById('the-file'); //works

do I have to specify a method after the jquery selector or sth? Because I can't see why else it wouldn't work, aren't they practically the same code?

I have added the jquery.js file on top (I have many lines of jquery working on other parts of my file so that can't be the issue.) and the document ready. I got it to work but am wondering the reason behind this.

Edit

By doesn't work I mean that with the jquery selector I get "undefined" in console log but with the javascript I get all the file information that I need.

Answer 1

The problem is that the jQuery object is a wrapper for the actual DOM object - which in this case is an HTML <input> element which has the type file . Only the actual DOM object has the files property, not the jQuery object. You can access the DOM elements referenced by using numeric indexes, which will only be 0 in this situation. Therefore, this is the solution:

var fileInput = $('#the-file');
fileInput.files[0]; // TypeError: cannot read property '0' of undefined
fileInput[0].files[0]; // works

Of course, the jQuery way of doing it would be to use the prop() function, which gets the property of the first DOM object in the jQuery object:

fileInput.prop('files')[0];

Answer 2

Given that I don't know what you mean by "doesn't work" I would guess that its because whatever is using fileInput wants a DOM element and not a jquery object. Try this:

var fileInput = $('#the-file')[0];