Cómo validar la extensión de un archivo mediante Javascript

Validar la extensión de un fichero antes de subirlo al servidor es vital si contamos con una función para cargar archivos en nuestra aplicación web. Nos ayuda a asegurarnos que el usuario ha seleccionado la extensión de archivo correcta. Validar al extensión de un archivo es mucho más sencillo desde el lado del cliente, que del lado del servidor. Mediante Javascript, podemos comprobar si la extensión del archivo enviado entra dentro de las extensiones de archivo que permitimos en nuestra aplicación.

En este tutorial, te mostraremos cómo validar la extensión de un archivo mediante Javascript. Utilizando este script, puedes impedir al usuario que suba otras extensiones de archivo distintas a las que permitimos en nuestra aplicación.

En este script de ejemplo, validaremos que el archivo enviado sea una imagen, utilizando Javascript, permitiendo al usuario subir exclusivamente archivos de tipo .jpg, .jpeg, .png y .gif. Si la extensión del archivo enviado no coincide con los tipos especificados, se mostrará un mensaje de error al usuario. Si todo ha ido bien, se le mostrará al usuario una preview de la imagen que ha subido.

Código Javascript

La función fileValidation() contiene todo el código para validar la extensión de nuestros archivos. Debes llamar a esta función de Javascript para validad el tipo del fichero que nos envíen.

function fileValidation(){
    var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(.jpg|.jpeg|.png|.gif)$/i;
    if(!allowedExtensions.exec(filePath)){
        alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
        fileInput.value = '';
        return false;
    }else{
        //Image preview
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(fileInput.files[0]);
        }
    }
}

Definimos mediante expresiones regulares los tipos de archivos que permitiremos en nuestra plataforma en la variable allowedExtensions. Si quieres validar otro tipo de ficheros, cambia la expresión regular en base a tus necesidades.

Código HTML

Cuando el usuario suba el fichero, se ejecutará la función fileValidation(). Si el archivo enviado entra dentro de nuestros ficheros permitidos, como he dicho antes, mostraremos una preview de la imagen en el div imagePreview.

<!-- File input field -->
<input type="file" id="file" onchange="return fileValidation()"/>

<!-- Image preview -->
<div id="imagePreview"></div>