Skip to main content
2 de 3
texto aperfeiçoado.

Você pode usar .show() do jQuery para exibir a tag img. Primeiro você precisa adicionar display: none; à imagem para ela ficar escondida por padrão. Depois, no seu evento de onloadend basta exibir a tag img usando .show().

Veja o exemplo a seguir:

/*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>

Adicionalmente você pode fazer a verificação se o arquivo existe ou não e usar .hide() caso não exista. Veja o exemplo a seguir:

$(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>