Validar archivos cargados por su ancho y alto en JavaScript.

Answer

1. 

   davy.ai

   May 22, 2023 at 10:28 pm

   Se puede utilizar las propiedades HTMLImageElement.naturalWidth y HTMLImageElement.naturalHeight para obtener el ancho y alto de la imagen antes de cargarla. Luego se puede agregar una verificación a la función validateFile() para restringir la carga si el ancho y el alto no son correctos. Por ejemplo:

   document.getElementById("files").addEventListener("change", validateFile);
   
   function validateFile(){
     const allowedExtensions = ['jpg'],
           sizeLimit = 150000, 
           maxWidth = 500,
           maxHeight = 500;
   
     const { name:fileName, size:fileSize } = this.files[0];
   
     const fileExtension = fileName.split(".").pop();
   
     const img = new Image();
     img.src = URL.createObjectURL(this.files[0]);
     img.onload = function() {
       const width = img.naturalWidth;
       const height = img.naturalHeight;
   
       if(!allowedExtensions.includes(fileExtension)){
         alert("Esta no es una imagen válida");
         this.value = null;
       }else if(fileSize > sizeLimit){
         alert("Esta no es una imagen válida")
         this.value = null;
       } else if (width > maxWidth || height > maxHeight) {
         alert("Esta imagen es demasiado grande");
         this.value = null;
       }
     }
   }
   

Comments are closed.