Preview de IMAGEN al elegirla en un INPUT de tipo FILE |
HTML-код
- Опубликовано: 1 окт 2024
- Un práctico snippet para agregar en todos tus forms, para hacer una vista previa de una imagen seleccionada en un input de tipo file, como source de una etiqueta IMG.
Archivo con el ejemplo: bit.ly/3kUTZrM
Si tenés dudas (no solo de este video), podés evacuarlas en los comentarios o participar en las tutorías de programación en vivo, en bit.ly/Padawan....
Buscame sino en tu red social preferida: bit.ly/Pada1sT...
Me gusta más así:
const defaultImg = 'ruta completa de tu imagen default';
let imagen = document.getElementById('imagen');
let inputImg = document.getElementById('imgUrl');
inputImg.onchange = function() {
if (inputImg.files[0]){
imagen.src = URL.createObjectURL(inputImg.files[0]);
}else{
//click cancel
imagen.src = defaultImg;
}
}
oye no seria mejor hacerlo de este manera , soy nuevo en esto de js xD:
const input_imagen= document.getElementById('input-imagen');
let imagen_mostrar="";
input_imagen.addEventListener('change', ()=> {
const imagen_tomada = input_imagen.files[0];
if (imagen_tomada){
imagen_mostrar= URL.createObjectURL(imagen_tomada)
document.getElementById('picture').src=imagen_mostrar
}else{
document.getElementById('picture').src="" // Imagen a mostrar por defecto
}
})
Muy buen video y buena explicación 😊
Excelente y suscinto!
Una consulta, ¿Como sería para cargar múltiples imágenes?
y si yo tengo eso del lado izquierdo y otro del lado derecho, por que solo me funciona del azquierdo?, hay laguna manera que funcione de los dos lados?
osea tengo dos inputs
Gran video, no conocia ese objeto de js...es un golazo, yo lo mandaba directo al servidor y que por ajax se mostrara el archivo..., esta bueno para no acumular archivos al pepe en el servidor. Lo voy a comenzar a usar. Un golazo, gracias!
Exacto, te ahorrás la petición, y el tiempo de demora (lento o rápido) del apache procesando la foto.
Abrazo grande, Dieguito gracias por el apoyo como siempre!
Hola German, soy un gran admirador de la forma en que explicas y compartis tus conocimientos, es lo mas placentero y motivador. Yo soy un amateur de la programacion, me falta aprender muchisimo, si bien soy analista en sistemas, pero me di cuenta que me apasiona la programacion especialmente con los lenguajes php, css y javascript.
Ahora yendo al grano. Mi duda es la siguiente, estoy haciendo una previsualizacion de la foto a la hora de editar un registro, pero no me funciona , es decir tengo mi tabla con mas de 5 registros y cuando elijo uno de ellos para editar a travez de una ventana (modal) y quiero cambiar la foto y no se actualiza la previsualizacion, soy conciente de que el error esta en que se duplican los id, al igual que en tu ejemplo, tengo un id en la imagen y un id en el input de tipo file, pero al tener mas de un registro es como que tengo mas de un id con el mismo nombre por ende no me funciona la previsualizacion, que solucion a eso me podrias dar u orientar, llevos dias tratando de resolverlo. Mi idea era poner en el id del input y de la img un (nombre) seguido de (), entonces de esta manera cada registro tendra un id diferente acorde a su registro, pero a la hora de llamarlo en javascript por getelementbyid no permite traer el (), Si me pudieras dar una mano referente a eso o como podria hacerlo te lo voy agradecer. Quedo atento a tu respuesta. Saludos
Excelente video Germán. Se aprende bastante. Se entendió perfectamente la explicación. Abrazo
Muy bueno che y bien explicado como siempre. Ya lo voy a implementar
Gracias Lea, espero seguir trayéndoles cosas de implementación rápida que sirva para mejorar las webs
Abrazo!
grande amigo, muchas gracias. Me sirvió mucho!
Me alegra haberte aydado, Andrés.
Abrazo grande y gracias por tu comentario!
Excelente tutorial. Muchisimas gracias!
A vos por apoyar el canal, Janin.
Saludos!
Gracias me sirvió mucho
Buena, Ger! Posta no le da bola nadie y es re útil!
Y si bien podés no saber qué hace el FileReader( ) o los métodos que tiene, es solo usar esas líneas para mejorar un poquito la experiencia final.
Abrazo grande, Fena!
Excelente justo lo que necesitaba.
Me alegra haber aportado una solución, Andrea.
Gracias por tu comentario, saludos!
Buenísimo Germán. Soy nuevo y aprendí un montón de cosas nuevas. Gracias. PD: Es una boludés, pero hace poco me enteré que podés poner el script en el head con el atributo "defer" y se carga al final de todo. Abrazo
Gracias Apo por tu mensaje (y bienvenido).
Y sí, es cierto que el script se puede diferer con el atributo defer o metiendo todo su código en una función que se dispare al cargar el window o el DOMContent, peeero me quedé en la época donde Google no miraba con buenos ojos tener scripts en el head (quizás en la actualidad ya ni se fija en eso).
Abrazo grande y gracias por el apoyo y aporte!
Un crack 👌
Super util grs
un grande
buen video me sirvio, ¿pero como hago que si aunque recargue la pagina se me mantenga?
Si recargas la pagina no tendrías el value del input de tipo file, en consecuencia no enviarías ninguna foto al procesar el formulario, así que de nada te serviría mantener el preview.
Dicho eso, la única forma que se me ocurre sería guardar el preview en el sessionStorage del navegador, para que se conserve la información.
Ya no tengo mucho tiempo para ver los directos, pero buen contenido sigue así 💪💪
Cris querido, cómo andas????
Espero que tus cosas vayan de 10 y eventualmente verte de nuevo por los streams. Abrazo grande y gracias por el comentario!!
Y si quisiera guardar la imagen en un servidor, se podria no?...
Claro
pero si recargas se borra la imagen eso no tiene chiste
Y para qué te pensás que hay un formulario alrededor de ese input de tipo file?
Spoiler: es para que la mandes al servidor y la guardes con el lenguaje de backend que más te guste.
Muchas gracias! Tremenda explicación!
Gracias a vos, por el comentario y apoyo al video.
Saludos!!
Oiga!
Lo oigo (?
@@PadawansTrainer ví muy por arriba a js pero ya casi que entiendo la wea.
¡Wena po! ¡Te felicito por tan poquito! ¡Ni que hubierai ganado el Nobel!
Es chiste, me alegra estar aportando de a poco la iluminación para que te adentres en JS, abrazo grande, querido!
messiiiirve!! gracias =)
Abrazo de gol, Ale, gracias por el apoyo y el comentario!
Buenisimo!!
Gracias por tu comentario y apoyo, newentu!
Abrazo.
@@PadawansTrainer Saludos men!