file upload validation in jquery

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:

Read Also:  how to change date format from dd/mm/yyyy to mm/dd/yyyy in javascript?

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.

Read Also:  How to validate upload file size and file extension using JavaScript?

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Create Dynamic Image Slider using PHP with jQuery
  2. Read Also:  Multiple file upload extension validation using jQuery Validate
  3. Read Also:  Autocomplete Textbox using jQuery, PHP and MySQLi
  4. Read Also:  DataTables Pagination Server-side Processing using PHP and MySQL
  5. Read Also:  Ajax Live Data Search using Jquery PHP MySql
  6. Read Also:  file upload size limit validation in javascript
  7. Read Also:  Get multiple checkbox value using jquery PHP
  8. Read Also:  Jquery File Upload Size validation Example
  9. Read Also:  PHP MySQL Infinite Scroll Pagination
  10. Read Also:  PHP MySQL Delete record with confirmation popup using jquery ajax
CLOSEX