1

Hola a todos les pido ayuda ya que tengo un input de tipo file, lo que quiero hacer es que cuando el usuario seleccione un archivo, con javascript o jquery muestre al lado la imagen, por decirlo asi una muestra de como se va a ver y guardar la imagen, ¿hay alguna forma de hacer tal cosa sin recargar la página o algo asi?, este es el codigo de mi input:

<input id="cover" type="file" class="form-control @error('cover') is-invalid @enderror" name="name" value="{{ old('cover') }}" required autocomplete="off" autofocus>

Desde ya gracias :).

1 respuesta 1

4

Tengo uno en javascript que hace ese trabajo que pides. A mí me funciona a la perfección. Simplemente al seleccionar una imagen de tu galería, ésta te muestra en un div: #preview.

Ejemplo:

 
/* Estilo de la imágen previsualizado */

#preview img {
 display: block;
 width: 100%
}
<!-- El input -->
<input id="cover" type="file" class="form-control @error('cover') is-invalid @enderror" name="name" value="{{ old('cover') }}" required autocomplete="off" autofocus>
<hr> 
<!-- previsualización -->
<div id="preview"></div>

<script>
document.getElementById("cover").onchange = function(e) {   
 
 // Se crea el objeto FileReader 
 let reader = new FileReader();   
 
 // Lee el archivo y se pasa a fileReader   
 reader.readAsDataURL(e.target.files[0]);   
 
 // Cuando este listo ejecuta el código interno 
 reader.onload = function(){ 
  
  let preview = document.getElementById('preview'), 
  image = document.createElement('img'); 
  image.src = reader.result; 
  preview.innerHTML = ''; 
  preview.append(image);
   
 }; 

}
</script>

1
  • Gracias, asi funciono :)
    – DFG
    Commented el 22 oct. 2021 a las 2:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.