Apuesto a que te has preguntado cómo hacen algunas páginas o redes sociales para mostrar tus imágenes antes de ser subidas, pareciera que es uno de esos secretos ocultos que nadie puede aprender, te voy a contar un secreto, tu puedes aprenderlo, y en este tutorial te voy a enseñar cómo hacerlo, pero para ello necesitaremos sacar un haz debajo de la manga 🧙♂️.
.
Antes de continuar quiero avisarte que estaremos trabajando con algo de JavaScript (y jQuery), sin embargo, NO es necesario jQuery para hacer esto, pero nos ayudará a implementar nuestra lógica más rápido.
Es simple, todo esto es posible gracias a un método del objeto URL
de JavaScript llamado getObjectURL
, a grandes rasgos, este método codificará la imagen que le des y creará una URL ficticia en la cual vivirá tu imagen temporalmente. Es esta URL la que usaremos para mostrar nuestra previsualización.
.
¿Estás listo para hacerlo? ¡Vamos!
.
¡Genial!, ahora que ya conociste este secreto, ¿empezarás a aplicarlo? sé que si, espero que te haya gustado el tutorial y puedas sacarle provecho.
.
Estaré pendiente de los comentarios por si tienes alguna duda, recuerda que puedes aprender más cosas como estas suscribiendote a mi canal donde estaré subiendo cosas interesantes 💚