Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mazfreelance/5320cde7e21d59aa507b9719f14ad185 to your computer and use it in GitHub Desktop.
Save mazfreelance/5320cde7e21d59aa507b9719f14ad185 to your computer and use it in GitHub Desktop.
JQuery: Validation image file if file size is too big
//HTML
<p id="error1" style="display:none; color:#FF0000;">
Invalid Image Format! Image Format Must Be JPG, JPEG, PNG or GIF.
</p>
<p id="error2" style="display:none; color:#FF0000;">
Maximum File Size Limit is 4MB.
</p>
<p>
<input type="file" accept="image/*" name="image_upload_file" id="image_upload_file" required/>
</p>
//jquery
$('#image_upload_file').bind('change', function() {
if ($('#buttonsubmit').attr('disabled',false)){
$('#buttonsubmit').attr('disabled',true);
}
var ext = $('#image_upload_file').val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['gif','png','jpg','jpeg']) == -1){
$('#error1').slideDown("slow");
$('#error2').slideUp("slow");
a=0;
}else{
var picsize = (this.files[0].size);
if (picsize > 4000000){ // *change size if u want 4000000 = 4MB
$('#error2').slideDown("slow");
a=0;
}else{
a=1;
$('#error2').slideUp("slow");
}
$('#error1').slideUp("slow");
if (a==1){
$('#buttonsubmit').attr('disabled',false);
$('#buttonsubmit').css('color','red');
}
}
});
@shubhu258
Copy link

#butttonsubmit is defined for which id

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment