Jquery Image validation for client side on change

Posted: July 5, 2013 in Jquery Validation

<div class=”custom-uploadimage”>
<div>

<img id=”img1″ name=”img1″ src=”#” alt=””>
<label for=”section” class=”error” id=”error1″ style=”display:none;”>Please choose a file size upto 1MB</label>

<label for=”section” class=”error” id=”errorfile” style=”display:none;”>Please choose a file type jpeg,jpg,phg,gif</label>
<input type=”file” name=”image1″ id=”image1″ ><br>
</div>
<br />
<br />
<div>

<img id=”img2″ name=”img2″ src=”#” alt=””>
<label for=”section” class=”error” id=”error2″ style=”display:none;”>Please choose a file size upto 1MB</label>
<label for=”section” class=”error” id=”errorfile2″ style=”display:none;”>Please choose a file type jpeg,jpg,phg,gif</label>
<input type=”file” name=”image2″ id=”image2″><br>
</div>

</div>

<!– Check Validation for image file type and size –>
<script language=javascript>
var $j = jQuery.noConflict();
function readURL(input) {

if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
$j(‘#img1’).attr(‘src’, e.target.result);
$j(‘#img1’).attr(‘width’, 125);
}

reader.readAsDataURL(input.files[0]);
}
}
function readURL2(input) {
$j.noConflict();
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
$j(‘#img2’).attr(‘src’, e.target.result);
$j(‘#img2’).attr(‘width’, 125);
}

reader.readAsDataURL(input.files[0]);
}
}
$j(document).ready(function($) {
var exts = [‘jpg’, ‘jpeg’, ‘gif’, ‘png’];
$j(“#image1”).change(function() {
var imge1size = this.files[0].size / 1024 / 1024;
var filename1 = this.value;

// split file name at dot
var get_ext = filename1.split(‘.’);
// reverse name to check extension
get_ext = get_ext.reverse();
if ($j.inArray(get_ext[0].toLowerCase(), exts) < 0) {

$j(“#errorfile”).css(‘display’, ‘block’);
$j(“.btn-more-info”).attr(‘disabled’, ‘disabled’);

return false;
}

else if (imge1size > 1) {
$j(“#errorfile”).css(‘display’, ‘none’);
$j(“#error1”).css(‘display’, ‘block’);
$j(“.btn-more-info”).attr(‘disabled’, ‘disabled’);
return false;
} else {
$j(“#errorfile”).css(‘display’, ‘none’);
$j(“#error1”).css(‘display’, ‘none’);
$j(“.btn-more-info”).removeAttr(‘disabled’);
readURL(this);
}
});
$j(“#image2”).change(function() {
var imge2size = this.files[0].size / 1024 / 1024;
var filename2 = this.value;
// split file name at dot
var get_ext = filename2.split(‘.’);
// reverse name to check extension
get_ext = get_ext.reverse();
if ($j.inArray(get_ext[0].toLowerCase(), exts) < 0) {

$j(“#errorfile2”).css(‘display’, ‘block’);
$j(“.btn-more-info”).attr(‘disabled’, ‘disabled’);
return false;
}
else if (imge2size > 1) {
$j(“#errorfile2”).css(‘display’, ‘none’);
$j(“#error2”).css(‘display’, ‘block’);
$j(“.btn-more-info”).attr(‘disabled’, ‘disabled’);
return false;
} else {
$j(“#errorfile2”).css(‘display’, ‘none’);
$j(“#error2”).css(‘display’, ‘none’);
$j(“.btn-more-info”).removeAttr(‘disabled’);
readURL2(this);
}

});
});
</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s