Today, We want to share with you file upload validation in jquery.In this post we will show you jquery validations for file upload extension and size, hear for File upload size validations using jQuery with demo we will give you demo and example for implement.In this post, we will learn about Multiple File Upload Extension Validations Using JQuery Validate with an example.
Validate Files and File Extensions on Upload
Check File Size & Extension Before Uploading Using jQuery
Example 1:
HTML code
The jQuery
$('input[type="submit"]').prop("disabled", true);
var a=0;
//binds to onchange event of your input field
$('#picture').bind('change', function() {
if ($('input:submit').attr('disabled',false)){
$('input:submit').attr('disabled',true);
}
var ext = $('#picture').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 > 1000000){
$('#error2').slideDown("slow");
a=0;
}else{
a=1;
$('#error2').slideUp("slow");
}
$('#error1').slideUp("slow");
if (a==1){
$('input:submit').attr('disabled',false);
}
}
});
File Type (extension) Validation with JavaScript
Example 2:
File upload size validation using jQuery
Example 3: index.html
In this example if we upload File which size is greater than 300kb it give a message.
I hope you get an idea about multiple file upload 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.