1

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/

1
  • 2
    No meu caso gerou quatro, ganho um bônus por isso? Commented 7/03/2014 às 21:11

2 Respostas 2

6

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++)

Exemplo atualizado.

9
  • 2
    Curiosamente resolver o problema é mais fácil ainda usando ES6: jsfiddle.net/PqppL Commented 7/03/2014 às 21:16
  • 1
    Achei que as linhas 14,15 e 16 do exemplo pudessem cuidar disso, mas percebi agora que mesmo quando faço 'files.item("qualquer coisa")' uma imagem é retornada. Commented 7/03/2014 às 21:18
  • @GustavoRodrigues Verdade. Você sabe o quão bem suportado ES6 é nos browsers atuais? Não achei nenhuma informação no caniuse.com
    – mgibsonbr
    Commented 7/03/2014 às 21:19
  • Não estou falando de suporte atual, mas que o ES6 resolve o problema do for in com arrays tão facilmente. Suporte? Acho que só o Firefox. Commented 7/03/2014 às 21:25
  • 1
    @LucasMarçalDosSantos estranho... deve ser um bug. A documentação de FileList.item pede claramente um índice numérico. Aliás, vou atualizar minha resposta, pois ela só funciona por causa desse bug :P
    – mgibsonbr
    Commented 7/03/2014 às 21:25
2

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;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .