Skip to main content
Javascript

Validar extensiones de archivos con jQuery

Por 11 diciembre, 2016Sin comentarios
Como validar múltiples extensiones con la función each de jQuery

Supongamos que tenemos un formulario donde podemos subir uno o varios archivos. Si queremos validar el tipo de archivo porque nos interesa un solo tipo en concreto, por ejemplo de imagen, lo podemos hacer con php al enviar el formulario al servidor

. Pero tenemos que esperar la respuesta del servidor tanto si es favorable como si no. Por eso, prefiero hacer las validaciones con javascript antes de hacer la llamada al servidor con AJAX.
Una de las formas más sencilla es validando la extensión del archivo. Así podras reducir la comprobación a una o varias extensiones en concreto. Es tan sencillo como esto:

var archivo = $("#file").val();
var extensiones = archivo.substring(archivo.lastIndexOf("."));

Tán sencillo como sacar el valor del input de tipo «file», que devuelve la url del archivo. Con la segunda variable sacamos una subcadena de la url, empezando por el ultimo «.» hasta el final. Lo que nos da la extensión («.jpg»,».pdf»,».doc»). Ahora solo hace falta hacer la comprobación:

if(extensiones != ".jpg" && extensiones != ".pdf" && extensiones != ".doc")
{
    alert("El archivo de tipo " + extensiones + "no es válido");
}

Pero, ¿y si en el formulario se pueden enviar varios archivos?
Puede que tengamos varios input de tipo archivo o un solo input «multiple», posible desde la llegada de HTML5. Podemos validarlo uno por uno como hemos visto al principio o, para no hacerlo tán engorroso, lo podemos validar como un array. Imagínate que tenemos este formulario:

<form action="" method="post">
  <input type="file" name="imagen[]"/>
  <input type="file" name="imagen[]"/>
  <input type="file" name="imagen[]"/>
</form>

Si queremos validar si el array de archivos son de tipo imagen lo podemos hacer con la función .each() de jQuery:

$("input[name='imagen[]']").each(function(){
    var file = $(this).val();
    var ext = file.substring(file.lastIndexOf("."));
    if(ext != ".jpg" && ext != ".png" && ext != ".gif" ext != ".jpeg")
    {
        valido = false;
        return false;
    }
    else
    {
        valido = true;
        return true;
    }  
});
//Ahora validamos el formulario

if(valido == false)
{
    alert("La extensión " + ext + " no es una imagen");
}

Primero, declaramos una varible que al final nos servira para saber si los archivos son válidos o no. Luego aplicamos la función .each() sobre los input con el atributo name = «imagen[]». Esta función permite ejecutar las sentencias que queramos tantas veces como elementos contenga el array.
Por lo tanto, utilizamos el código del principio en esta función. Sacamos la extensión de cada archivo en una subcadena y comprobamos. Si uno de los archivos no es una imagen, a la variable que hemos declarado al principio se le asigna el valor «false». Y con return false; paramos la función. Si por el contrario todos son imágenes, el valor de la variable es true. Ahora, en nuestras validaciones del formulario, comprobamos el valor de la variable. Si es false, alguno de los archivos NO es una imagen.
¡Así de sencillo!

Jairo Calero

Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

Deja tu respuesta