How do you make the <div> with the <img> tag only appear after the photo is loaded?

Asked

Viewed 115 times

1

good afternoon friends. I’m using Jquery so as soon as I receive the image by the "file" input, send it to the img tag placed next to it, however, I want the image to appear only after loading... If I put the proportions in which the image should appear after loaded, the tag borders are showing even without any image

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

/*Parte JQuery que envia a imagem para a tag*/
<script>
$(function(){
    $('#input_preview').change(function(){
        const file = $(this)[0].files[0]
        const fileReader = new FileReader()
        fileReader.onloadend = function(){
            $('#img_preview').attr('src',fileReader.result)
        }
        fileReader.readAsDataURL(file);
    })
})
</script>
 /*  css  */
.imagem_prepost img{
  width: 90px;
  height: 100px;
  border-radius: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form  method="post" class="form-group">

  <div class="imagem_prepost">
      <img id="img_preview" alt=""> 
  </div>
  
  <div class="botoes_postar" style="display:flex;">
      <input name="arquivo" id="input_preview" type="file" />
      <button type="submit">Postar</button>
  </div>
  
</form>

javascript html jquery css

2 answers

2


You can use .show() jQuery to display the tag img. First you need to add display: none; image to hide by default. Then, in your onloadend just display the tag img using .show().

See the following example:

/*Parte JQuery que envia a imagem para a tag*/
$(function(){
    $('#input_preview').change(function(){
        const file = $(this)[0].files[0]
        const fileReader = new FileReader()
        fileReader.onloadend = function(){
            // adicionando .show() ao preview da imagem
            $('#img_preview').attr('src',fileReader.result).show();
        }
        fileReader.readAsDataURL(file);
    })
})
/*  css  */
.imagem_prepost img{
  width: 90px;
  height: 100px;
  border-radius: 0;
  /* deixando a imagem escondida */
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form  method="post" class="form-group">

  <div class="imagem_prepost">
      <img id="img_preview" alt=""> 
  </div>
  
  <div class="botoes_postar" style="display:flex;">
      <input name="arquivo" id="input_preview" type="file" />
      <button type="submit">Postar</button>
  </div>
  
</form>

Additionally, you can check whether or not the file exists and use .hide() if it does not exist. See the following example:

$(function(){
  $('#input_preview').change(function(){
      const file = $(this)[0].files[0]

      const fileReader = new FileReader()

      // Se algum arquivo foi passado
      if (file) {
         $('#img_preview').show();
         fileReader.readAsDataURL(file);
      }
      // Se não foi passado nenhum arquivo
      else $('#img_preview').hide();


      fileReader.onloadend = function(){
          $('#img_preview').attr('src',fileReader.result);
      }
  })
})
/*  css  */
.imagem_prepost img{
  width: 90px;
  height: 100px;
  border-radius: 0;
  /* deixando a imagem escondida */
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form  method="post" class="form-group">

  <div class="imagem_prepost">
      <img id="img_preview" alt=""> 
  </div>
  
  <div class="botoes_postar" style="display:flex;">
      <input name="arquivo" id="input_preview" type="file" />
      <button type="submit">Postar</button>
  </div>
  
</form>

  • Thanks bro, broke the biggest branch... just one more question... what event could I add if the photo he chose was the wrong one or if he gave up putting the photo? like an "x" button to remove the image... as I would?

  • 1

    If you put a button x, just add an event of .click() on the button and inside the event apply the .hide(). Thus: $("#botao").click(function(){ $('#img_preview').hide(); });. And you can put this button to appear only when the image is selected, just like you did with the div of preview.

  • thanks bro! I just used here...

  • Brother... a new problem has arisen kkkk, is working properly the part of disappearing and etc.. but as my site is already posting, when I remove the photo with Hide() in the onclick() event button, by only hiding the image, when I will post after "delete it" in preview, still posted with the photo... I would like to know how to remove itla totalmente da postagem...

  • 1

    This depends on how you do to indicate that the post has a photo. You can tell how you’re doing this?

  • refers to php code?

  • 1

    Both php and the code sending the request to the server

  • I put the code there bro, I hope you can understand...

Show 3 more comments

1

You can add a class to hide the div, and remove or add if an image is selected. If you do not select an image, the div will disappear again.

/** javascript */
$(function(){
    $('#input_preview').change(function(){
        const container = $('.imagem_prepost');
        const image = $('#img_preview');

        const file = $(this)[0].files[0]

        if (file) {
            const fileReader = new FileReader()
            fileReader.onloadend = function(){
                image.attr('src',fileReader.result)
            }
            fileReader.readAsDataURL(file);
        }

        file ? container.removeClass('hide') : container.addClass('hide');
    })
})

/** css */
.imagem_prepost img{
  width: 90px;
  height: 100px;
  border-radius: 0;
}

.hide {
    display: none;
}

  • opa, thanks for the tip tb mano!!! just like Uro, broke a "gallon"!!

Browser other questions tagged javascript html jquery css

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