Aprende en casa Ir a KODOTI
Aprende en casa KODOTI

Validando una imagen con javascript

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

Rodríguez Patiño, Eduardo
Rodríguez Patiño, Eduardo
2020-07-07 | 16,653 lecturas

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);" />

Estudia con nosotros

🚀 Mejora tus oportunidades laborales