Jump to content
Fórum Script Brasil
  • 0

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


Edilson Santiago

Question

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?

Edited by Edilson Santiago
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 1

https://www.w3schools.com/html/html_elements.asp
image.png.59a94c8d8adda70b36423c2685c00fa9.png

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):
image.png.6b53ff34102ae4e9ab734cdf1e995d7a.png

Link to comment
Share on other sites

  • 0

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.

Edited by Frank K Hosaka
Link to comment
Share on other sites

  • 0
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      652k
×
×
  • Create New...