Uma dúvida, porquê isso trabalha:
$("input[type='file']")[0].files[0]
e isso não?
$("input[type='file']").files[0] // TypeError: $(...).files is undefined
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeCom o Wallace respondeu, ele retorna um jQuery Object. Dessa forma, você está acessando o primeiro ( e provavelmente único, no seu caso ) elemento DOM que retornou do objeto.
Você pode acessar um elemento, da seguinte forma:
$("input[type='file']")[0]
ou
$("input[type='file']").get(0)
Há também a função .first(), que retornará o primeiro DOM element do objeto retornado pelo seletor:
$("input[type='file']").first()
OBS: A função .first() criará um novo jQuery Object com o primeiro elemento.
@edit
Conforme a dica comentada pelo Guilherme Lautert, também pode acessar um índice através do seletor :eq():
$("input[type='file']:eq(0)")
Quando você faz isso $("input[type='file']")[0]
, você está acessando o objeto HTMLInputElement
, que é nativo do javascript.
Nesse elemento, existe a propriedade files
.
Exemplo:
HTMLInputElement.prototype.hasOwnProperty('files'); // true
Já no caso do $("input[type='file']")
você está retornando a instância o objeto do jQuery
, o qual não possui essa propriedade.
Por que o JQuery irá buscar por Uma ou + ocorrências de input[type='file']
, logo irá listar os resultados num Objeto pelas chaves ([0][1][2],etc)
.
files
da mesma forma.
1/10/2015 às 14:51
object
(que é o jQuery) e outro é retornado o HTMLInputElement
, que é o input file
independente de jQuery (é nativo do javascript). A sua resposta leva a entender que o problema é o jQuery ter retornado mais de um elemento, e isso não é a verdade. Ele poderia retornar até 100. Se usava o [0]
na frente sempre retornar o HTMLInputElement
1/10/2015 às 17:05
Basicamente a mesma resposta do Wallace, no entanto vou explicar de outra maneira.
O .files
é uma propriedade nativa da API DOM do JavaScript, sendo assim ele será acessível apenas no quando usar document.getElementById
e document.querySelector
, por exemplo:
document.querySelector("input[type=file]").files
Quando você faz isto:
$("input[type=file]")[0] //ou .get(0)
Você transforma (extrai) um objeto para DOM, como se tive-se pegado com document.querySelector
, fazendo o .files
ficar acessível.
Então .files
só seria acessível assim $(...).files
se existi-se esta propriedade no jQuery.
Nota:
document.getElementsByName
,document.getElementsByTagName
edocument.querySelectAll
retorna objetosarrays
então.files
só estará disponível se você acessar um dos items destearray
.
Existe uma maneira de fazer isto ser acessível, através do jQuery.fn.
do jQuery, seria assim:
jQuery.fn.extend({
"files": function() {
var el = this.get(0);
var files = el ? el.files : false;
return files ? files : [];
}
});
E usa-lo deve ser algo como:
console.log($("input[type=file]").files());
Note que ele vai retornar uma array
com os arquivos selecionados e apenas do primeiro elemento da lista do "objeto jQuery".