Actualmente estoy trabajando en la creación de un formulario que tome un archivo .png y lo almacene en una base de datos. ¿Hay alguna manera de mostrar la imagen en la interfaz inmediatamente después de que el usuario seleccione .png desde su explorador de archivos sin recargar la página o enviar el formulario? es decir, ¿se puede mostrar la imagen inmediatamente después de la selección sin ninguna interacción de back-end?
Reduciéndolo a los componentes más simples, estoy buscando algo donde la imagen se muestre en un div sobre la entrada de la imagen:
<div id="SelectedImage">Selected Image:</div> <input id="pngFile" type="file" />Gracias por adelantado.
Hola puedes hacerlo con jQuery, por ejemplo:
function img_pathUrl(input){ $('#img')[0].src = (window.URL ? URL : webkitURL).createObjectURL(input.files[0]); } #img { background: #ddd; width:100px; height: 90px; display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="img"> <br> <input type="file" id="img_file" name="img_file" onChange="img_pathUrl(this);">Adáptalo a tus necesidades.