Visualizar imagem antes de fazer o upload no HTML

Gunnar CorreaGunnar Correa17/12/2020 às 10:04:38 - 116 acessos

Visualizar imagem antes de fazer o upload no HTML

Usando o objeto FileReader conseguimos capturar a imagem do input file e renderizar em um componente de imagem.


Exibir a imagem antes de fazer o upload, tem se tornado cada vez mais usual entre os desenvolvedores, visto que no passado esse processo era uma feature para poucos sistemas, mas com o avanço do Javascript, o processo se tornou simplório.

Vamos ver aqui, como exibir a imagem antes de fazer o upload, mais precisamente, recuperar o arquivo selecionado e exibi-lo no componente <img>.

O processo é bem simples e se dá através do uso do Javascript, então, assista a nossa videoaula abaixo e confira todo o código fonte em seguida.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="max-width">
        <div class="imageContainer">
            <img src="camera.png" alt="Selecione uma imagem" id="imgPhoto">
        </div>
    </div>

    <input type="file" id="flImage" name="fImage" accept="image/*">

    <script src="script.js"></script>
</body>

</html>

style.css

/*https://www.flaticon.com/free-icon/camera_685655?term=photo&page=1&position=1&related_item_id=685655*/

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    border: none;
}

input[type='file'] {
    display: none;
}

.max-width {
    max-width: 500px;
    width: 100%;
}

#imgPhoto {
    margin-top: 10%;
    width: 300px;
    height: 300px;
    padding:10px;
    background-color: #eee;
    border: 5px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background .3s;
}

#imgPhoto:hover{
    background-color: rgb(180, 180, 180);
    border: 5px solid #111;
}

script.js

'use strict'

let photo = document.getElementById('imgPhoto');
let file = document.getElementById('flImage');

photo.addEventListener('click', () => {
    file.click();
});

file.addEventListener('change', () => {

    if (file.files.length <= 0) {
        return;
    }

    let reader = new FileReader();

    reader.onload = () => {
        photo.src = reader.result;
    }

    reader.readAsDataURL(file.files[0]);
});

Bem, ficamos por aqui, espero que tenham gostado.

Até a próxima.


filereader html filereader javascript html image preview visualizar imagem ver imagem upload html upload imagem

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.