How to Validate image width and height validation using jquery

Validating the dimensions of an image before uploading it can be a crucial part of form validation. By checking the image's width and height, you can ensure that the uploaded image meets your specific requirements. In this article, we will discuss how to perform image width and height validation using jQuery.
  • Make HTML Form
  • Add Jquery Library
  • Define Validation Rules of image dimensions
  • Define Error Message
  • Submit Form

Create new html file

    At first you have create new html file in your specific path . Then open the html file that will display the data and add the following code

index.html

<!DOCTYPE html>
<html>
<head>
<title>Image validation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>

<body>
<div class="page-wrapper">
<div class="content container-fluid">

<div class="page-header">
<div class="row">
<div class="col-sm-7 col-auto">
<h3 class="page-title">Image Gallery</h3>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item active">Image Gallery</li>
</ul>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">


<form action="#" method="post" enctype="multipart/form-data">
<div class="row form-row">

<div class="col-12 col-sm-6">
<div class="form-group">
<label>Image</label>
<input type="file" name="mobile_image" id="mobile_image" class="form-control" required>
<span>Recommended : 212 x 150 px </span><br>
</div>
</div>




</div>

<div class="col-lg-2 col-xl-2 col-sm-12">
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" name="save" value="Save Changes" >
</div>
</div>
</form>



</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

Set Jquery Plugin 

Then, You add jquery plugin in your file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

Define Validation Rules and Error Message

Then, define the validation rules of  image width and height before uploading use to sample syntax

Jquery Image Dimensions Validation Script


<script>

// file upload check it
var _URL = window.URL || window.webkitURL;
$("#mobile_image").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {

                   if(this.width > 212 ) {
           
                          alert('Upload required size only');
                          $('#mobile_image').val('');
           
                    }else if(this.height  >  150 ) {
           
                          alert('Upload required size only');
                          $('#mobile_image').val('');
           
                    }
         
        };
        img.src = objectUrl;
    }
});


</script>


Full Source Code 


<!DOCTYPE html>
<html>
<head>
<title>Image validation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>

<body>
<div class="page-wrapper">
<div class="content container-fluid">

<div class="page-header">
<div class="row">
<div class="col-sm-7 col-auto">
<h3 class="page-title">Image Gallery</h3>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item active">Image Gallery</li>
</ul>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">


<form action="#" method="post" enctype="multipart/form-data">
<div class="row form-row">

<div class="col-12 col-sm-6">
<div class="form-group">
<label>Image</label>
<input type="file" name="mobile_image" id="mobile_image" class="form-control" required>
<span>Recommended : 212 x 150 px </span><br>
</div>
</div>




</div>

<div class="col-lg-2 col-xl-2 col-sm-12">
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" name="save" value="Save Changes" >
</div>
</div>
</form>



</div>
</div>
</div>
</div>
</div>
</div>


<script>



// file upl;oad check it
var _URL = window.URL || window.webkitURL;
$("#mobile_image").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {

                   if(this.width > 212 ) {
           
                          alert('Upload required size only');
                          $('#mobile_image').val('');
           
                    }else if(this.height  >  150 ) {
           
                          alert('Upload required size only');
                          $('#mobile_image').val('');
           
                    }


         
        };
        img.src = objectUrl;
    }
});


</script>


</body>
</html>

Finally enter your project url in browser. Validating the dimensions of an image before uploading show the error in alert box.

Imgae width and height validation using jquery

Conclusion

    We hope this guide has been helpful. If you have any questions or need further assistance, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.