How to select a photo and click on div?

Asked

Viewed 573 times

1

<!--Container para colocar a imagem de perfil-->
              <div id="imagem">
              </div>
              <!--Botão para selecionar a foto-->
              <input id="teste" class="botao_foto_perfil" type="file" name="flefoto"/>

<script>
    $('#teste').val();

    var img = $('#teste').val();
    $('#id_sua_img').attr('src', img);
</script>
javascript

  • did not work, still not appearing

  • You have to import the jQuery: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> and do as is reply.

  • Didn’t work the same way

1 answer

1


You can use the FileReader.

$("#teste").change(function(){
   if($(this).val()){ // só se o input não estiver vazio
      var img = this.files[0]; // seleciona o arquivo do input
      var f = new FileReader(); // cria o objeto FileReader
      f.onload = function(e){ // ao carregar a imagem
         $("#id_sua_img").attr("src",e.target.result); // altera o src da imagem
      }
      f.readAsDataURL(img); // lê o arquivo
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imagem">
    <img id="id_sua_img" src="" />
</div>
<!--Botão para selecionar a foto-->
<input id="teste" class="botao_foto_perfil" type="file" name="flefoto"/>

  • now yes, my code is with a bug that only recognizes Java at the end of the code so it was not working, thank you very much helped me

  • I don’t know how to do this

  • OK thank you very much

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.