Home > Software engineering >  Unable to preview same image using Javascript Php
Unable to preview same image using Javascript Php

Time:02-18

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('');
});
  • Related