Estoy trabajando con php y javascript, en este momento estoy tratando de mostrar la "vista previa de la imagen" antes de cargarla, puedo cancelar la imagen y seleccionar otra imagen después de mostrar la "vista previa", pero cada vez que cancelo cualquier imagen (haciendo clic en "cerrar" botón ) y luego seleccione la misma imagen y luego "vista previa" no se muestra, en otras palabras, si selecciono otra imagen después de cancelar, entonces todo funciona bien, pero si cancelo y selecciono la misma imagen nuevamente, entonces "vista previa de la imagen" no se muestra Aquí está mi código html
<span class="previewpostimage"><img id="thumb" src="" /></span> <span class="close_btn_t"> <button type="button" id="closebtn" style="display:none;"><span aria-hidden="true">×</span> </button> </span> <ul class="media_r_i_att_pp"> <li class="new_Btn"><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>Aquí está mi código de secuencia de comandos para "seleccionar imagen" y "imagen de vista previa"
<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>Parece que necesita restablecer el valor de la entrada del archivo cada vez que hace clic en 'x' porque su vista previa () solo llamará al cambio de valor de la entrada del archivo.
$('#closebtn').click(function () { $('#thumb').attr('src', ''); $('#closebtn').hide(''); $('#my_file').val(''); });