HTML

Permitir solo imágenes en input file de HTML

En este post te mostraré el atributo a establecer para aceptar solo imágenes en un campo de formulario de HTML 5 de tipo file, es decir, de un input type file. Por ejemplo, aceptar todo tipo de imágenes, solo imágenes PNG, etcétera.

Recuerda que esto solo es para validar del lado del cliente y que es una ayuda al usuario, pues no implica seguridad que se debe aplicar del lado del servidor.

Aceptar determinado tipo de archivo en formulario

Para ello simplemente define tu input con el atributo accept en el tipo de archivo de las imágenes. Si quieres permitir todas las imágenes, quedaría así:

<input accept="image/*" type="file" multiple>

Fíjate en que tiene image/* indicando que acepta todo tipo de imágenes. Por cierto, el atributo multiple no tiene que ver en el contexto de este post, pero te lo explico, es para que acepte varios archivos en lugar de uno.

Si por ejemplo solo quieres que acepte imágenes PNG y JPG podría ser:

<input accept="image/png,image/jpeg" type="file">

Ahora lo separamos por comas, y así puedes especificar todo el tipo de archivos que quieres permitir para el input.

Te lo repito, esto solo es una ayuda visual para el usuario, ya que en realidad se puede saltar fácilmente; por lo que siempre debes validar del lado del servidor o en el lugar en donde vayas a almacenar los archivos.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Servidor HTTP en Android con Flutter

El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…

3 días hace

Imprimir automáticamente todos los PDF de una carpeta

En este post te voy a enseñar a designar una carpeta para imprimir todos los…

4 días hace

Guía para imprimir en plugin versión 1 desde Android

En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…

1 semana hace

Añadir tasa de cambio en sistema de información

Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…

2 semanas hace

Comprobar validez de licencia de plugin ESC POS

Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…

2 semanas hace

Imprimir euro € en impresora térmica

Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…

3 semanas hace

Esta web usa cookies.