Preview de imagem selecionada num input file com src já carregado

HTML

JavaScript

PHP

09/08/2022

No meu formulário de editar usuario, tenho um campo onde aparece a logomarca do usuário. A url da imagem está salva no banco de dados. Ao abrir a página, a imagem é preenchida automaticamente assim:

<div class="logo" id="foto_logo" name="foto_logo"><img id="imgPhoto" src="<?php echo $logo_usuario ?>"</img>


Pois bem, quero que o usuário, ao clicar no "input type file", possa selecionar uma nova imagem, para trocar essa. E quero que, antes de subir a imagem e gravar a url no banco de dados, essa nova imagem apareça no lugar do 
src="<?php echo $logo_usuario ?>[code].

Fiz o java assim:

[code=java]<script type="text/javascript">
 
    var foto_logo = document.getElementById('foto_logo');

    foto_logo.addEventListener('change', function(e) {
    showThumbnail(this.files);
});

    function showThumbnail(files) {
        if (files && files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
        foto_logo.src = e.target.result;
    }

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


Mas nada acontece. Quando seleciono a imagem, continua mostrando a que está gravada no BD.

O que pode estar errado?
Edilson Santiago

Edilson Santiago

Curtidas 0
POSTAR