I am working with php and javascript,Right now i am trying to display "image preview" before upload,I can cancel image and can select another image after display "preview",But whenever i cancel any image(via click on "close" button ) and then select same image then "preview" not displaying ,In other words if i select another image after cancecl then everything is working fine but if i cancel and select same image again then "image preview" not displaying Here is my html code
<span ><img id="thumb" src="" /></span>
<span >
<button type="button" id="closebtn" style="display:none;"><span aria-hidden="true">×</span>
</button>
</span>
<ul >
<li ><a href="#"> <img src="assets/social/images/media_pt_att_xt.svg" alt="img"></a>
</li>
<input type="file" id="my_file" name="file" onchange="preview()" style="display: none;"/>
</a></li>
</ul>
Here is my script code for "select image" and "preview image"
<script>
$('.new_Btn').click(function() {
$('#my_file').click();
});
$('#closebtn').click(function() {
$('#thumb').attr('src', '');
$('#closebtn').hide('');
});
function preview() {
$('#thumb').show('');
$('#closebtn').show('');
thumb.src=URL.createObjectURL(event.target.files[0]);
}
</script>
CodePudding user response:
Seems like you need to reset the value of file input every time you click on 'x' because your preview() will call only on value change of file input.
$('#closebtn').click(function () {
$('#thumb').attr('src', '');
$('#closebtn').hide('');
$('#my_file').val('');
});