🥇 Imagens de visualização escolhidas com uma entrada de arquivo

Um campo de formulário de seletor de arquivo e uma tag de imagem para a visualização:

<input id="file" type="file" />
<img id="preview" />

Um saboroso JavaScript descafeinado:

var file = document.getElementById('file');
var preview = document.getElementById('preview');

file.addEventListener('change', function() {  
  preview.src = URL.createObjectURL(this.files[0]);
}, false);

O resultado: <a href=” http://jsbin.com/xobosacixa “target=”_blank”> http://jsbin.com/xobosacixa </a>

A imagem ainda não foi a lugar nenhum. Ele está no seu navegador, esperando que você envie o formulário.

Arrumado.

Related Posts