How to validate the image height and width using javascript?

[Raksha Solanki]

Hello Team,

I have tried the below code to validate the image height and width in javascript but the form submission is still taking place.


var fileUpload = $("#fuLogo")[0];
//event.preventDefault();

if ((fileUpload.value != null && fileUpload.value != "") || (document.getElementById("LogoDiv").style.display === "none")) {
//Check whether the file is valid Image.
var regex = /^(([a-zA-Z]|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.jpg|.JPG|.jpeg|.JPEG|.bmp|.BMP|.png|.PNG|.ico|.ICO|.gif|.GIF)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
//Check whether HTML5 is supported.
if (typeof (fileUpload.files) != "undefined") {
//Initiate the FileReader object.
var reader = new FileReader();
//Read the contents of Image File.

reader.onload = function (e) {

//Initiate the JavaScript Image object.
var image = new Image();
//Set the Base64 string return from FileReader as source.
image.src = e.target.result;
$('#imgTest').attr('src', e.target.result);
//$('#imgTest').show();
var uploadedImg = $('#imgTest');
height = uploadedImg[0].height;
width = uploadedImg[0].width;
if (height > 150 || width > 1500) {
chk = 1;
document.getElementById("lblLogoMsg").innerHTML = "Please upload logo with valid dimensions.";
} else {
document.getElementById("lblLogoMsg").innerHTML = "";
}
};
reader.readAsDataURL(fileUpload.files[0]);

}
}
if (chk == 1) {
return false;
} else {
document.getElementById("lblLogoMsg").innerHTML = "";
}
}
}
});
});

Continue reading...