En este post de HTML 5 te mostraré cómo aceptar determinada extensión de archivo en un input de tipo file de HTML.

Anteriormente te mostré cómo aceptar solo imágenes en un seleccionador de archivos de HTML, ahora te enseñaré como especificar la extensión de los archivos permitidos para el input.

Recuerda que esto solo es validación del lado del cliente, y que su propósito es meramente de diseño, no de seguridad.

Aceptar determinada extensión en input file de HTML

Para aceptar archivos de una única extensión, debes especificar el atributo accept con la extensión del archivo. Por ejemplo, yo solo quiero aceptar fuentes TTF con extensión .ttf así que queda así:

<input required type="file" accept=".ttf" id="font" name="font">

Al mostrarse el cuadro de diálogo para seleccionar el archivo, se mostrarán únicamente los archivos que cumplan con esa extensión.

En resumen, para indicar la extensión que acepta el input de tipo file, usa accept=".extensión_de_archivo".