Este código está funcionando bien. Restringe el tipo y el tamaño de la imagen antes de cargarla, pero además, me gustaría restringir la dimensión máxima de ancho y alto de la imagen antes de cargarla. Me gustaría restringir la carga si el ancho y la altura no son correctos, como lo hizo el script a continuación para la extensión y el tamaño. ¡Gracias!
document.getElementById("files").addEventListener("change", validateFile) function validateFile(){ const allowedExtensions = ['jpg'], sizeLimit = 150000; const { name:fileName, size:fileSize } = this.files[0]; const fileExtension = fileName.split(".").pop(); if(!allowedExtensions.includes(fileExtension)){ alert("This is not a valid image"); this.value = null; }else if(fileSize > sizeLimit){ alert("This is not a valid image") this.value = null; } } <input onchange="validateFile()" type="file" id="files" class="box_file">Use la propiedad clientWidth & clientHeight para el ancho y la altura y luego aplique la condición deseada.
var img = document.getElementById('files'); img.addEventListener('change', function() { const allowedExtensions = ['jpg'], sizeLimit = 150000; const { name:fileName, size:fileSize } = this.files[0]; const fileExtension = fileName.split(".").pop(); //gettting height & width var width = img.clientWidth; var height = img.clientHeight; let alrt = ""; if(!allowedExtensions.includes(fileExtension)){ alrt += "This is not a valid image! \n"; } debugger; if(fileSize > sizeLimit){ alrt += "This is not a valid image! \n"; } if(width != 200 && height != 20 ){ //checking height & width alrt += "not a valid dimention! \n"; } if(alrt){ alert(alrt); img.value = null; return false; } else{ alert("upload successful!"); return true; } }); <input type="file" id="files" class="box_file">