0

Tenho um form aonde possui um input file com preview de imagem antes do upload, to tentando substituir o input por uma imagem, mas não estou conseguindo.

SCRIPT PREVIEW Como está ficando!!!

<script>
    // PREVIEW FOTO
    function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };
</script>

HTML

<div class="image-upload"><label for="file-input">
                                        <img src="https://i.pinimg.com/originals/54/38/19/543819d33dfcfe997f6c92171179e4cd.png" id="uploadPreview" style="width: 110px; height: 110px;" />  
                                        <input id="uploadImage" id="file-input" type="file" name="foto" onchange="PreviewImage();" />   

CSS

 <style type="text/css">
    .image-upload > input
    {
    display: none;
    }
    </style>

Alguém me ajuda, agradeço desde já.

1 Resposta 1

1

Primeiro, a sua tag div não foi fechada corretamente, por isso o css aplicado na classe image-upload não foi aplicado e o botão de selecionar arquivo continuava em evidência.

Segundo, o atributo for da tag label precisa ter o mesmo valor que o atributo id da sua tag input. No seu código, a tag input possuia dois atributos id.

Alterando o seu HTML para o exemplo abaixo, funcionará corretamente.

<div class="image-upload">
        <label for="uploadImage">
            <img src="https://i.pinimg.com/originals/54/38/19/543819d33dfcfe997f6c92171179e4cd.png" id="uploadPreview" style="width: 110px; height: 110px;">
        </label>  
        <input id="uploadImage" type="file" name="foto" onchange="PreviewImage();">
    </div>
2
  • Obrigado, funcionou! uma perguntinha, não tem como ficar o quadradinho do lado aonde aparecia a imagem então?
    – user174392
    Commented 16/01/2020 às 19:06
  • 1
    Sim, remova o CSS .image-upload > input { display: none;} e então o botão de Selecionar Imagem ficará ao lado da imagem de preview.
    – Marcel
    Commented 16/01/2020 às 19:14

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