none
How to validate the image height and width using javascript? RRS feed

  • Question

  • 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 = "";
                            }
                        }
                    }
                });
            });

    • Moved by CoolDadTx Monday, September 24, 2018 2:12 PM ASP.NET related
    Monday, September 24, 2018 5:34 AM

All replies

  • Imho you need to read naturalHeight and naturalWidth after loading your image (not the reader) is completed.

    And clean-up your code. Use proper indenting and lesser inline comments and more functions. Also the first if condition is flawed. Either you don't need the logo test or it should be an AND.


    Monday, September 24, 2018 8:07 AM
  • The problem which I am facing is that the form gets submitted even if the height and width of the image are not valid. Please, can u provide me with the solution which checks the height and width of the image and validates it?
    Monday, September 24, 2018 12:23 PM
  • Which form? There is no form involved in your sample..
    Monday, September 24, 2018 1:07 PM
  • This is the C# forums. Please post questions related to web development in the ASP.NET forums.

    Michael Taylor http://www.michaeltaylorp3.net

    Monday, September 24, 2018 2:12 PM