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

[Edilson Santiago]

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 <?php echo $logo_usuario?>.

O script ficou assim:

<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 só que nada acontece. Quando seleciono a imagem, continua mostrando a que está gravada no BD.

O que pode estar errado?

Editado Agosto 9, 2022 por Edilson Santiago

[lowys]

https://codepen.io/mobifreaks/pen/AMjEKw

Aparentemente está certinho.
certifique-se de que o input:file é o único #foto_logo

Editado Agosto 11, 2022 por lowys

[Frank K Hosaka]

O JavaScript é muito legal, quando funciona. No meu caso, eu sempre faço esse tipo de erro:

<?php
$logo_usuario="frank";?>
<script type="text/javascript">
    foto_logo = document.getElementById('inpfoto');
    foto_logo.addEventListener('change', function(e) {
		showThumbnail(this.files);})
		function showThumbnail(files) {
			if (files && files[0]) {
				reader = new FileReader();
				reader.onload = function (e) {
					imgPhoto.src = e.target.result;}
				reader.readAsDataURL(files[0]);}}
</script>
<input type=file id=inpfoto>
<div class="logo" id="foto_logo" name="foto_logo"><img id="imgPhoto" src="<?=$logo_usuario?>"></img>

Aqui o código JS foi escrito antes dos elementos, logo, ele não tem como saber quem é quem. A listagem está invertida.
O correto é assim:
 

<?php
$logo_usuario="frank";?>
<input type=file id=inpfoto>
<div class="logo" id="foto_logo" name="foto_logo"><img id="imgPhoto" src="<?=$logo_usuario?>"></img>
<script type="text/javascript">
    foto_logo = document.getElementById('inpfoto');
    foto_logo.addEventListener('change', function(e) {
		showThumbnail(this.files);})
		function showThumbnail(files) {
			if (files && files[0]) {
				reader = new FileReader();
				reader.onload = function (e) {
					imgPhoto.src = e.target.result;}
				reader.readAsDataURL(files[0]);}}
</script>

Outro erro bastante comum é que sempre confundo o nome do elemento que vai abrir o arquivo (inpfoto), o nome do painel que vai receber o arquivo (foto_logo), o nome do elemento que vai receber a imagem (imgPhoto), isso para não mencionar que sempre esqueço de fechar o marcador do tipo 

<img id="imgPhoto" src="<?php echo $logo_usuario ?>"</img>

No caso acima, eu presumi que o fechamento do tag <?php já fechava o <img. O JS é muito chato, ele não gosta de mim.

Editado Agosto 11, 2022 por Frank K Hosaka

[lowys]

https://www.w3schools.com/html/html_elements.asp

A recomendação dos mantenedores do html, é: nunca se esqueça da tag de fechamento.

As exceções são self-closing tags
Tags que dispensam a tag de fechamento (elas não precisam de marcação de onde começam e onde terminam, elas começam e terminam em si mesmas):

[Edilson Santiago]

Em 11/08/2022 em 13:05, Frank K Hosaka disse:

O JavaScript é muito legal, quando funciona. No meu caso, eu sempre faço esse tipo de erro:

<?php
$logo_usuario="frank";?>
<script type="text/javascript">
    foto_logo = document.getElementById('inpfoto');
    foto_logo.addEventListener('change', function(e) {
		showThumbnail(this.files);})
		function showThumbnail(files) {
			if (files && files[0]) {
				reader = new FileReader();
				reader.onload = function (e) {
					imgPhoto.src = e.target.result;}
				reader.readAsDataURL(files[0]);}}
</script>
<input type=file id=inpfoto>
<div class="logo" id="foto_logo" name="foto_logo"><img id="imgPhoto" src="<?=$logo_usuario?>"></img>

Aqui o código JS foi escrito antes dos elementos, logo, ele não tem como saber quem é quem. A listagem está invertida.
O correto é assim:
 

<?php
$logo_usuario="frank";?>
<input type=file id=inpfoto>
<div class="logo" id="foto_logo" name="foto_logo"><img id="imgPhoto" src="<?=$logo_usuario?>"></img>
<script type="text/javascript">
    foto_logo = document.getElementById('inpfoto');
    foto_logo.addEventListener('change', function(e) {
		showThumbnail(this.files);})
		function showThumbnail(files) {
			if (files && files[0]) {
				reader = new FileReader();
				reader.onload = function (e) {
					imgPhoto.src = e.target.result;}
				reader.readAsDataURL(files[0]);}}
</script>

Outro erro bastante comum é que sempre confundo o nome do elemento que vai abrir o arquivo (inpfoto), o nome do painel que vai receber o arquivo (foto_logo), o nome do elemento que vai receber a imagem (imgPhoto), isso para não mencionar que sempre esqueço de fechar o marcador do tipo 

<img id="imgPhoto" src="<?php echo $logo_usuario ?>"</img>

No caso acima, eu presumi que o fechamento do tag <?php já fechava o <img. O JS é muito chato, ele não gosta de mim.

Perfeito, consegui resolver. Obrigado