Validar el tamaño de una imagen en javascript es muy fácil, nos permite obligar al usuario a cargar imágenes de tamaño especifico.
Lo primero que deben hacer es dibujar en la pantalla un input de tipo file que permita subir solo imágenes.
< input id="foto" name="foto" accept=".jpeg,.jpg" type="file" onchange="ValidarTamaño(this);" />
Pueden notar en el evento Onchange un método validartamaño que carga la imagen a través de la función URL.createObjectURL.
Una vez cargado el objeto permite obtener las propiedades width.toFixed(0) y height.toFixed(0) a continuación el código.
function ValidarTamaño(obj)
{
var uploadFile = obj.files[0];
...
var img = new Image();
img.onload = function ()
{
if (this.width.toFixed(0) != 413 && this.height.toFixed(0) != 531)
{
alert("La imagen debe ser de tamaño 413px por 531px.");
$('#foto').val("");
}
...
};
img.src = URL.createObjectURL(uploadFile);
}
Al buscar algo relacionado con tamaño de archivo quizá tenga un doble sentido, puede ser tamaño en pixeles o Peso.
A pesar de que si quieren validar el peso el bytes por alguna extraña razón buscan con la palabra tamaño.
Si quieres validar en peso de la imagen simplemente agrega el siguiente código donde están los tres puntos del código anterior.
Básicamente se utiliza la propiedad size y se divide entre 1024 para convertir de Bytes a KiloBytes.
var sizeByte = this.files[0].size;
var siezekiloByte = parseInt(sizeByte / 1024);
if(siezekiloByte > 100){
alert('El tamaño supera el limite permitido');
$('#foto').val('');
}
Y listo puede probar el código en la siguiente URL: https://codepen.io/vanguarsoft/pen/eLQGom
Esperamos sea de utilidad estamos a la orden VanguarSoft Software a tu medida.
En VanguarSoft esperamos dar tips sobre lo que aprendemos día a día para compartir y a la vez demostrar nuestras capacidades como desarrolladores de Software.
Para solicitar un presupuesto puede solicitarlo acá: https://vanguarsoft.com.ve/solicitar-presupuesto/