In this tutorial we will learn how to validate an image width and height dimensions before upload before submitting the form. Images is important for site’s look and feel.

You have created a HTML form of user profile where you user need to fill-up his/her personal details and upload profile image. But, You want user to upload image of specific dimension for example you need user to upload image having height more than 100px and width more than 100px. In this situation client side form validation for images will come in picture.

Validate an Image Width And Height

Validate an Image Width And Height Before Upload Using JQuery

This tutorial will show how to validate an image width and height before upload before submitting the form.

Directory Structure

HTML Form

Create simple HTML page which contains form having a file control. Class imgControl is used for jquery operations. Code data-width="20" and data-height="20"will validate image dimension with 20×20. You can change as per your requirement



Add JQuery Validation

Insert JQuery 2.1.1 and JavaScript code into web page at the end of tag. Below code will validate an image width and height on the change event of file control. It will use data attribute of file control and compare height and width of selected image. If dimensions does not match thab error message will show otherwise if dimensions matches than success message will show next to file control accordingly.

Full Code

Output

Validate Image Width And Height Output

When we upload image having dimension 20×20 than success message will show otherwise it will show error message Eg “Please select valid image”.

 

Read More:

Composer – Dependency manager for PHP

Create a RESTful Web Service API with Slim

How To Integrate Stripe Payment Gateway Using PHP and JavaScript

sFileTypeChecker – JQuery Plugin To Verify Input File before uploading

sSwitch – JQuery Toggle Button Plugin For Sliding Toggle Switches

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">