Validar Tamaño y Tipo de Archivo Input File con HTML + Jquery

Validar tipo de archivo con HTML

Para validar el tipo de archivo que puede aceptar un Input File necesitaremos el atributo «accept» para que una vez se abra el dialogo para elegir el archivo se aplique un filtro para solo aceptar los archivos que añadamos en el atributo.


<input id="campoFile" accept="tipo_de_archivo|audio/*|video/*|image/*|media_type" name="archivo" type="file" value="" />

FILTROS NORMALMENTE UTILIZADOS:

AUDIO (.mp3, .wav, etc): accept=»audio/*»
IMAGES: accept=»image/gif,image/jpeg,image/jpg,image/png»
EXCEL 97-2003 (.xls): accept=»application/vnd.ms-excel»
EXCEL 2007+ (.xlsx): accept=»application/vnd.openxmlformats-officedocument.spreadsheetml.sheet»
PDF: accept=».pdf»
VIDEO (.avi, .mpg, .mpeg, .mp4): accept=»video/*»

Validar Tamaño y Extensión con Javascript y Jquery

Para validar el tamaño del archivo utilizaremos una función muy sencilla utilizando JQUERY antes de enviarlo por POST.

Prueba con las diferentes extensiones y cambia el código Javascript para ver los resultados: