Validar la extensión de un fichero con Javascript

Validar el tipo de archivo antes de subirlo al servidor es algo obligatorio si contamos con un formulario en el que se suben ficheros a nuestra aplicación web. Ayuda a asegurarnos que el usuario ha seleccionado la extensión correcta del archivo subido. La validación del lado del usuario es más amigable que hacerlo desde el lado del servidor.

En este tutorial veremos cómo implementar la extensión de un archivo en Javascript. Utilizando nuestro script de validación, puedes restringir a que el usuario suba solo los tipos de archivo que tu quieras.

Código Javascript

La función fileValidation() contiene el código necesario para validación de la extensión del fichero. Es por eso que, necesitamos llamar a la función de Javascript para comprobar la extensión.

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 una expresión regular en la variable allowedExtensions para definir la extensiones de imágenes aceptadas. Si quieres validar otros tipos, cambia la expresión regular a lo que te convenga.

Código HTML

Cuando se seleccione el fichero, se ejecutará la función fileValidation(). Si la extensión del fichero está permitida en nuestra función de validación, se mostrará la imagen en el div imagePreview.

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

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