Cómo aceptar únicamente imágenes en un campo de archivo de entrada

Al agregar un campo de archivo a un formulario, es posible que desee limitar el selector de imágenes

Por supuesto, puede agregar un filtro del lado del servidor, pero tener un filtro del lado del cliente también es una excelente experiencia de usuario para sus usuarios: no se pierde tiempo ni recursos para enviarle un archivo y regresar con un error.

Puede hacerlo utilizando el acceptatributo y especificando el tipo MIME de los archivos que acepta.

image/*Debería capturar todas las imágenes.

input type="file" name="myImage" accept="image/*" /

Si solo deseas permitir algunos tipos de archivos específicos, enumeralos:

input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" /

Puede comprobar la compatibilidad del navegador con este atributo aquí: https://caniuse.com/#feat=input-file-accept

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase