image validation in jquery – How to validate image file in JavaScript?

image validation in jquery – jQuery to Show Image Preview after Validating Image Size and Type Before Upload in jquery Example with demo.

image validation in jquery

Validation of file size while uploading using JavaScript / jQuery. File upload size validation using jQuery with demo. Upload image with validation using jquery ajax form plugin.

File upload size validation using jQuery with demo

index.html

Check File Size & Extension Before Uploading Using jQuery

The HTML Code

Upload dpImg:



Invalid Image Format! Image Format Must Be JPG, JPEG, PNG or GIF.


Maximum File Size Limit is 1MB.

The jQuery

$('input[type="submit"]').prop("disabled", true);
var a=0;
//binds to onchange event of your input field
$('#dpImg').bind('change', function() {
if ($('input:submit').attr('disabled',false)){
	$('input:submit').attr('disabled',true);
	}
var ext = $('#dpImg').val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['gif','png','jpg','jpeg']) == -1){
	$('#msgErr1').slideDown("slow");
	$('#msgErr2').slideUp("slow");
	a=0;
	}else{
	var picsize = (this.files[0].size);
	if (picsize > 1000000){
	$('#msgErr2').slideDown("slow");
	a=0;
	}else{
	a=1;
	$('#msgErr2').slideUp("slow");
	}
	$('#msgErr1').slideUp("slow");
	if (a==1){
		$('input:submit').attr('disabled',false);
		}
}
});

jQuery validate file type before upload

I hope you get an idea about image validation in jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.