Validate an Image Width And Height Before Upload Using JQuery
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 Before Upload Using JQuery
This tutorial will show how to validate an image width and height before upload before submitting the form.
|
1
2
3
|
index.php
js
-- jquery-2.1.1.min.js
|
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
|
1
2
3
4
5
6
7
8
9
|
<h2>Image width and size validator</h2>
<form method="post" id="frmImage" enctype="multipart/form-data">
<div>
<label>Image</label><small> (Width 20px, Height: 20px):</small>
<br />
<br />
<input type="file" name="image" class="imgControl" id="test" data-width="20" data-height="20" />
</div>
</form>
|
Insert JQuery 2.1.1 and JavaScript code into web page at the end 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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".imgControl").change(function(e){
var file, img;
var _URL = window.URL || window.webkitURL;
var width = $(this).data('width');
var height = $(this).data('height');
var myId = $(this).attr('id');
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
if(this.width != width || this.height != height){
if ($("#"+ myId + "-image-error").length > 0){
$("#"+ myId + "-image-error").show();
} else {
$('<label id="'+ myId +'-image-error" class="error-msg">Please select valid image!</label>').insertAfter("#"+myId);
}
$("#"+ myId + "-image-msg").hide();
} else {
if ($("#"+ myId + "-image-msg").length > 0){
$("#"+ myId + "-image-msg").show();
} else {
$('<label id="'+ myId +'-image-msg" class="success-msg">Valid image uploaded!</label>').insertAfter("#"+myId);
}
$("#"+ myId + "-image-error").hide();
}
};
img.src = _URL.createObjectURL(file);
}
});
});
</script>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html>
<html>
<head>
<title>Image width and size validator</title>
<style type="text/css">
.error-msg{
display: block;
color: red;
}
.success-msg{
display: block;
color: green;
}
</style>
</head>
<body>
<h2>Image width and size validator</h2>
<form method="post" id="frmImage" enctype="multipart/form-data">
<div>
<label>Image</label><small> (Width 20px, Height: 20px):</small>
<br />
<br />
<input type="file" name="image" class="imgControl" id="test" data-width="20" data-height="20" />
</div>
</form>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".imgControl").change(function(e){
var file, img;
var _URL = window.URL || window.webkitURL;
var width = $(this).data('width');
var height = $(this).data('height');
var myId = $(this).attr('id');
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
if(this.width != width || this.height != height){
if ($("#"+ myId + "-image-error").length > 0){
$("#"+ myId + "-image-error").show();
} else {
$('<label id="'+ myId +'-image-error" class="error-msg">Please select valid image!</label>').insertAfter("#"+myId);
}
$("#"+ myId + "-image-msg").hide();
} else {
if ($("#"+ myId + "-image-msg").length > 0){
$("#"+ myId + "-image-msg").show();
} else {
$('<label id="'+ myId +'-image-msg" class="success-msg">Valid image uploaded!</label>').insertAfter("#"+myId);
}
$("#"+ myId + "-image-error").hide();
}
};
img.src = _URL.createObjectURL(file);
}
});
});
</script>
</body>
</html>
|
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
