Quero gerar thumbnails de imagens que o usuário seleciona. O meu problema é que sempre uma das imagens gera 3 thumbnails
Demo aqui: http://jsfiddle.net/gTLXp/
Quero gerar thumbnails de imagens que o usuário seleciona. O meu problema é que sempre uma das imagens gera 3 thumbnails
Demo aqui: http://jsfiddle.net/gTLXp/
Você não deve usar for .. in
para iterar sobre arrays (ou array-likes). Ele é usado para iterar sobre as propriedades de um objeto. Como seu FileList
tem três propriedades ("0"
, "length"
e "item"
) o código vai executar três vezes.
Substitua por um for
comum:
for (var key = 0 ; key < files.length ; key++)
for in
com arrays tão facilmente. Suporte? Acho que só o Firefox.
Commented
7/03/2014 às 21:25
FileList.item
pede claramente um índice numérico. Aliás, vou atualizar minha resposta, pois ela só funciona por causa desse bug :P
Commented
7/03/2014 às 21:25
O problema é o uso do for (... in ...)
, que lê também as propriedades do array de files, tal como length
. Ou seja, você está adicionando uma imagem quando a propriedade length é iterada!
EDIT Uma ajuda para gerar o thumb:
Só para suplementar a resposta, você pode redimensionar o elemento img
de forma a manter as proporções da imagem original, definindo o seguinte estilo para ela:
max-width: 20px; /* qualquer largura máxima desejada */
width: auto;
height: auto;