JavaScript: preview de imagem carregada em input file

Neste artigo vamos aprender como fazer um preview de imagem carregada em input file, ou seja, após inserir a imagem em um formulário exibiremos ela na página.

preview de imagem form capa

Fala programador(a), beleza? Bora aprender coisa nova!

Sempre que inserimos uma imagem em um form, só é exibido o nome dela e sua extensão

O que pode gerar dúvida no usuário, se ele inseriu a imagem correta

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Por isso a ideia de fazer um preview é excelente, podemos inserir uma pré-visualização antes de enviar para o servidor

Então vamos ao código:

<!DOCTYPE html>
<html>
<head>
    <title>Preview de imagem carregada em input file</title>
</head>
<body>
    <h1>Insira a imagem</h1>
    <form>
        <div>
            <input id="img-input" type="file" name="imagem">
        </div>
        <div id="img-container">
            <img id="preview" src="">
        </div>
        <div>
            <input type="submit" value="Enviar">
        </div>
    </form>
</body>
</html>
Formação Vibe Coding
Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

  • 474 aulas
  • 20 projetos
  • 39h 27min

Esse será nosso HTML base, com o formulário e o input de arquivos

Além disso criamos uma div com o id de img-container, que contem uma imagem sem src

Com JavaScript vamos preencher esse src, com o da imagem enviada, fazendo assim o preview

Veja o código JS:

function readImage() {
    if (this.files && this.files[0]) {
        var file = new FileReader();
        file.onload = function(e) {
            document.getElementById("preview").src = e.target.result;
        };       
        file.readAsDataURL(this.files[0]);
    }
}

document.getElementById("img-input").addEventListener("change", readImage, false);

O que acontece aqui é: temos um mapeamento de evento change, no input de arquivos

Ao ocorrer uma mudança (enviar imagem), a função readImage é acionada

Esta função tem como principal objetivo ler o arquivo enviado e mudar o atributo de preview para o src da imagem

Fazendo com que a imagem seja exibida na div abaixo do input

E assim conseguimos mostrar o preview de imagem carregada em input file

Exemplo do resultado atingido:

ex preview de imagem input file

Conclusão

Neste artigo vimos como exibir o preview de imagem adicionada ao formulário

Utilizamos JavaScript para manipular o src de imagem previamente inserida no código HTML

Para que quando o arquivo for enviado, ela exiba a imagem que enviamos

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Um detalhe que ajuda MUITO o usuário: limitar o input pra aceitar só imagem

Assim ele nem consegue escolher um PDF ou um zip sem querer

Basta adicionar o atributo accept no input de arquivo:

<input id="img-input" type="file" name="imagem" accept="image/*">

O image/* diz pro navegador filtrar e mostrar só arquivos de imagem na hora de selecionar

Simples e evita dor de cabeça

E se o usuário trocar de ideia e quiser tirar a imagem?

Dá pra limpar o preview zerando o src da imagem

Você pode ligar isso a um botão, por exemplo:

function limparPreview() { document.getElementById("preview").src = ""; document.getElementById("img-input").value = ""; }

Aqui a gente esvazia o src do preview e ainda reseta o value do input

Resetar o input é importante, senão o navegador ainda entende que tem um arquivo selecionado ali

Por que a imagem não aparece no preview?

Geralmente é porque o id do input ou da imagem no JavaScript não bate com o do HTML

Confere se o img-input e o preview estão escritos igualzinho nos dois lugares

Dá pra fazer preview de mais de uma imagem?

Dá sim, você adiciona o atributo multiple no input e percorre o this.files com um laço, criando um preview pra cada arquivo

O FileReader funciona em todos os navegadores?

O FileReader é bem antigo e tem suporte amplo nos navegadores modernos, então pode usar tranquilo

Leia também

Subscribe
Notify of
guest

6 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Adrian Cavalcante Santos

Isso funciona com duas inputs do tipo file na mesma pagina? tipo, eu tenho uma input do tipo file que é pra o usuario enviar a imagem de fundo, e a outra input é pra enviar a imagem de perfil.

Battisti

Sim, mas você vai precisar fazer as tratativas para ambas, pegando a sua fonte e tudo mais…

Natanael

Ajudou demais, obrigado!!

Battisti

de nada Natanael!

Edilson Santiago

Muito bom. Prático e funcional. Apenas uma dúvida: eu tenho um formulário que, ao ser aberto, o src já está preenchido com uma url pelo banco de dados. Então essa imagem já aparece na div. Queria saber como faço para esse preview substituir a imagem que já está aparecendo, pela que foi selecionada do input file.

AUGUSTO

Olá,
Estou querendo usar os eventos “onMouseover” e “onMouseout” para mostrar uma IMAGEM quando o usuário passar o mouse sobre uma TAG <input type=”radio” …>
Como seria o código JS para isso?

Last edited 3 anos atrás by AUGUSTO

Formações

Formação SAAS com IA

Formação SAAS com IA

Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!

  • 291 aulas
  • 18 projetos
  • 24h 17min

Blog | Mais populares