2

Eae galera, blz?

Tô precisando de um código que ao fazer upload de uma imagem via input do tipo file ela seja exibida em um tipo de "preview".

O que eu tenho até agora é isso:

HTML:

<div class="card">
    <img class="card-img-top" src="<?=$foto?>" id="fotopreview">
        <div class="card-body">

            <h4 class="card-title">Alterar foto do aluno</h4>

            <p class="card-text">Selecione uma imagem no botão abaixo</p>

            <input type="file" class="form-control-file" name="foto" id="uploadfoto">

        </div>
</div>

JS:

    uploadfoto = document.getElementById('uploadfoto');
    fotopreview = document.getElementById('fotopreview');

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

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

        reader.onload = function (e) {
            $('#fotopreview').attr('src', e.target.result);
        }

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

Esse código ai não chega a mudar o atributo src do elementro "fotopreview".

Alguém ae pode dar uma mão?

Vlw!

2
  • qual é o erro que aparece para você? O código que postou está funcionando, talvez você tenha esquecido de adicionar a referência do JQuery Commented 3/11/2017 às 19:42
  • Não aparece nada, simplesmente não muda o atributo src. Inclusive olho o código fonte da página após carregar a imagem, e o atributo src continua sem nada. Você testou ai? Se testou e funcionou, qual versão do jquery ta usando? Commented 3/11/2017 às 19:50

1 Resposta 1

2

Me parece que no seu caso o erro pode estar acontecendo devido a falta do JQuery, segue o trecho do javascript puro (o jquery só estava sendo usado em uma única linha)

var uploadfoto = document.getElementById('uploadfoto');
var fotopreview = document.getElementById('fotopreview');

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

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

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

        reader.readAsDataURL(files[0]);
    }
}
<div class="card">
    <img class="card-img-top" src="<?=$foto?>" id="fotopreview">
        <div class="card-body">

            <h4 class="card-title">Alterar foto do aluno</h4>

            <p class="card-text">Selecione uma imagem no botão abaixo</p>

            <input type="file" class="form-control-file" name="foto" id="uploadfoto">

        </div>
</div>

5
  • Obrigado pela resposta cara, mas ainda não tá funcionando :/ Você acha que funcionaria relacionando o "onchange" do input diretamente com a função que muda o atributo src? Se sim, como que eu faria para enviar o arquivo por parâmetro? Valeu! Commented 3/11/2017 às 20:08
  • não funcionou na sua página ou aqui no snipet da resposta? Commented 3/11/2017 às 20:10
  • Não tinha visto o snipet kkkk. Não funcionou na minha página, o que pode ser? Até criei um documento separado somente com esses trechos e mesmo assim nada. Commented 3/11/2017 às 20:17
  • Provavelmente você está colocando o js antes do html, ele vai ter que ficar no final para dar certo. Commented 3/11/2017 às 20:22
  • Que burrice kkkkkkk Era isso mesmo Marcelo. Obrigado aos dois ai, me salvaram Commented 3/11/2017 às 20:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .