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

Contents

Check File Size & Extension Before Uploading Using jQuery
Example 1:

HTML code

<form name="form" method="post" action="" enctype="multipart/form-data" >
<p>
<label>Upload Picture:</label>
<input type="file" name="file" id="picture" required />
</p>
<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 1MB.
</p>
<p>
<input name="submit" type="submit" value="Submit" id="submit" />
</p>
</form>

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 input field -->
<input type="file" id="file" onchange="return fileValidation()"/>

<!-- Image preview -->
<div id="displayProfile"></div>
<script>
function fileValidation(){
    var profileInpDP = document.getElementById('file');
    var filePath = profileInpDP.value;
    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if(!allowedExtensions.exec(filePath)){
        alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
        profileInpDP.value = '';
        return false;
    }else{
        //Image preview
        if (profileInpDP.files && profileInpDP.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('displayProfile').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(profileInpDP.files[0]);
        }
    }
}
</script>

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.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#profileDP").change(function(){
$("#file_error").html("");
$(".file_upload1").css("border-color","#F0F0F0");
var file_size = $('#profileDP')[0].files[0].size;
if(file_size>300000) {
$("#file_error").html("<p style='color:#FF0000'>File size is greater than 300kb</p>");
$(".file_upload1").css("border-color","#FF0000");
return false;
}
return true;
});
});
</script>
</head>
<body>
<span id="file_error"></span>
<input type="file" id="profileDP" name="file_upload1" class="file_upload1">
</body>
</html>

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.

Validate Files and File Extensions on Upload

File Type (extension) Validation with JavaScript

File upload size validation using jQuery

Related posts: