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í:

See the gist on github.

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:

See the gist on github.

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.