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
/*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>
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?
– Filipe Oliveira
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 thediv
of preview.– Mauro Roberto
thanks bro! I just used here...
– Filipe Oliveira
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...
– Filipe Oliveira
This depends on how you do to indicate that the post has a photo. You can tell how you’re doing this?
– Mauro Roberto
refers to php code?
– Filipe Oliveira
Both php and the code sending the request to the server
– Mauro Roberto
I put the code there bro, I hope you can understand...
– Filipe Oliveira