Atributo accept de HTML

El atributo accept de HTML le indica al navegador qué tipos de archivos debe sugerir un control <input type="file"> en el selector de archivos del sistema operativo. Es una pista para la interfaz de usuario, no una función de seguridad o validación: facilita la búsqueda de los archivos correctos cuando el usuario hace clic en el botón de carga.

Esta página explica qué valores acepta accept (tipos MIME, extensiones de archivo y comodines), cómo combinarlos, cómo se comporta el valor en distintos navegadores, cómo se combina accept con el atributo multiple y la codificación de formularios, y por qué aún debes validar las cargas en el servidor.

Solo puedes usar accept en el elemento <input>, y únicamente cuando su type sea file. En cualquier otro tipo de entrada, se ignora.

Cómo usa el navegador el valor

Cuando el usuario abre el selector de archivos, el navegador usa accept para filtrar previamente qué archivos se muestran o se pueden seleccionar. El comportamiento exacto depende de cada navegador y sistema operativo:

• Chrome / Edge añaden una entrada al menú desplegable de tipos de archivo que coincide con tu lista accept y la seleccionan por defecto, aunque permiten al usuario cambiar a "Todos los archivos".
• Firefox filtra la lista de forma similar y, en algunas plataformas, también ofrece una opción de retroceso a "Todos los archivos".
• Safari respeta el valor, pero la redacción y la rigurosidad del filtro difieren de Chrome.

En todos los navegadores, el usuario puede anular el filtro y seleccionar un archivo que no coincida. El valor de accept nunca bloquea el envío del formulario y nunca se aplica de manera forzada. Trátalo únicamente como una comodidad.

Sintaxis

<input type="file" accept="value">

El valor es una lista separada por comas de uno o más especificadores de tipo de archivo. (Las tablas de referencia más antiguas a veces muestran las opciones con | entre ellas — ese símbolo significa "elige entre estos tipos de valor", no es válido en el propio atributo.) Cada especificador es uno de los siguientes:

Puedes combinar cualquiera de estos en una sola lista, separados por comas.

Ejemplos

Aceptar cualquier imagen

<form action="/form/submit" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*" />
  <input type="submit" value="Upload" />
</form>

Aceptar tipos MIME específicos

Usa una lista separada por comas para permitir solo ciertos formatos — aquí PNG y JPEG, pero no GIF ni WebP:

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

Aceptar por extensión de archivo

Las extensiones son útiles para formatos cuyo tipo MIME es extenso o inconsistente entre sistemas, como los documentos de oficina:

<input type="file" name="document" accept=".pdf,.doc,.docx" />

Aceptar audio o video

<!-- any audio file -->
<input type="file" name="track" accept="audio/*" />

<!-- any video file -->
<input type="file" name="clip" accept="video/*" />

Combinar tipos MIME con extensiones

Una sola lista accept puede contener ambas formas a la vez. Esto es útil cuando un comodín es demasiado amplio pero algunos tipos de archivo son más fáciles de expresar como extensión:

<input type="file" name="upload" accept="image/png,image/jpeg,.pdf,.docx" />

Uso con multiple y la codificación de formularios

accept casi siempre se usa junto con otras dos características de las entradas de archivo:

• El atributo multiple permite al usuario seleccionar más de un archivo a la vez desde el selector. Funciona igual con accept: el filtro se aplica a cada archivo que el usuario agrega.
• enctype="multipart/form-data" es obligatorio en el elemento <form> para que los archivos se envíen realmente. Una codificación de formulario normal solo transmite el nombre del archivo, no sus bytes.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="gallery">Choose images:</label>
  <input type="file" id="gallery" name="gallery" accept="image/*" multiple />
  <input type="submit" value="Upload" />
</form>

Para más información sobre la creación de formularios de carga, consulta la etiqueta HTML <form>, la etiqueta HTML <input> y la guía de Formularios HTML.

Seguridad: nunca confíes en accept

El atributo accept no es un mecanismo de validación. Depender de él para la seguridad es inseguro por dos razones:

• Suplantación de extensión. El nombre de un archivo (y por tanto su extensión) no dice nada sobre su contenido real. Cualquiera puede renombrar malware.exe a photo.png. El filtro accept solo examina la extensión y el tipo MIME reportado, ambos controlados por el cliente.
• Detección del tipo MIME. El tipo MIME que el navegador reporta para un archivo cargado se deriva del nombre del archivo o del sistema operativo, y puede ser falsificado. El servidor debe inspeccionar los bytes reales del archivo para saber qué es en realidad.

Dado que el usuario puede eludir completamente el filtro del selector, cada carga debe validarse en el servidor: verifica el tipo de archivo real a partir de su contenido (no de su nombre), aplica un límite de tamaño, guárdalo fuera de la raíz web o en una ruta segura, y nunca ejecutes archivos cargados. Usa accept solo para mejorar la experiencia del usuario, nunca como una barrera de seguridad.

Práctica