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». Esto hará que se abra el dialogo para elegir el archivo y que se aplique un filtro para solo aceptar los archivos que añadamos en el atributo.

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

FILTROS NORMALMENTE UTILIZADOS:

AUDIO (.mp3, .wav, etc):

accept="audio/*"

Para utilizar más de un filtro, debemos añadirlos separados por comas «,»

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

En el siguiente ejemplo aceptaremos archivos de imágenes, vídeo, audio y PDF.

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

En el código Javascript podemos observar las extensiones que aceptamos con la variable ext. Esta comprobación es CASE SENSITIVE, es decir que si colocamos extensiones en minúsculas, se hará la comprobación solo con extensiones en minúsculas.

Para evitar esto lo que hacemos es pasar la extensión que recuperamos en la variable ext y aplicarle el toLowerCase.

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