Validando una imagen con javascript

Veremos como validar un archivo por su extensión, peso y tamaño verificando que sea una imagen.

autor Rodríguez Patiño, Eduardo
publicado
visitas 24,282

En esta entrada veremos como validar una imagen desde el lado del cliente usando javascript puro.

Los pasos son secillos

  • Crear la función que usaremos para validar
  • Asignar un evento a un control input del tipo

Los criterios a validar serán

  • Formato (jpg, png, gif)
  • Peso de la imagen

Ahora les comparto la función

function validarImagen(obj){
    var uploadFile = obj.files[0];

    if (!window.FileReader) {
        alert('El navegador no soporta la lectura de archivos');
        return;
    }

    if (!(/\.(jpg|png|gif)$/i).test(uploadFile.name)) {
        alert('El archivo a adjuntar no es una imagen');
    }
    else {
        var img = new Image();
        img.onload = function () {
            if (this.width.toFixed(0) != 200 && this.height.toFixed(0) != 200) {
                alert('Las medidas deben ser: 200 * 200');
            }
            else if (uploadFile.size > 20000)
            {
                alert('El peso de la imagen no puede exceder los 200kb')
            }
            else {
                alert('Imagen correcta :)')                
            }
        };
        img.src = URL.createObjectURL(uploadFile);
    }                 
}

Y finalmente lo asignamos a un control input

<input type="file" name="file" onchange="ValidarImagen(this);" />

- Nuestros cursos -