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>