HTML

Especificar extensión de archivo en input file de HTML

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

See the gist on github.

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".

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

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/

Ver comentarios

Entradas recientes

Imprimir PDF con Bot de Telegram

La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…

3 días hace

Enviar mensaje con bot de Telegram usando JavaScript (lado del cliente)

Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…

4 días hace

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…

4 días hace

Plugin ESC POS – Actualización 3.4.0: imprimir HTML

El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…

5 días hace

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

2 semanas hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

2 semanas hace

Esta web usa cookies.