How to select a photo and load the div? [duplicate]

Question

How to select a photo and load the div? [duplicate]

Navigation

#1 by (1 votes)

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

asked by anonymous 28.03.2018 / 06:16

1 answer

How to change the size of a: before or: after dynamically with JQuery? Print bank contents with line break [duplicate]

score 1 · Accepted Answer

You can use 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><divid="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"/>