File Upload Validation in Jquery

File Upload Validation in Jquery [Simple Method]

by

In this blog, I shared a Jquery file upload validation where the user cannot upload a file of size more than 300kb. If the user tries to upload a file of more than 300kb, the submit button will be disabled.

And if the file uploads less than 300kb then the submit button will be activated. so first create a simple form using plain HTML.

HTML

<form>  
    
    <label>Document Name</label> <br>  
    <input type="text"> <br> <br>  

    <label>Please upload Document file size less than 300KB:</label> <br>  
    <input type="file" id="document_id" name="document_name" >
    <span id="file_error_msg"></span> <br> <br>  

    <input type="submit" value="Submit">  

</form>

Jquery

<script>
    $(document).ready(function(){
        $("#document_id").change(function(){
            $("#file_error_msg").html("");
            $(".file_upload1").css("border-color","#F0F0F0");
            var file_size = $('#document_id')[0].files[0].size;
            if(file_size>300000) {
                $("#file_error_msg").html("<p style='color:#FF0000'>File size is greater than 300kb</p>");
                $(".file_upload1").css("border-color","#FF0000");
                $(':input[type="submit"]').prop('disabled', true);
                return false;
            }else{
                $(':input[type="submit"]').prop('disabled', false);
            }
        return true;
        });
    });
</script>

Don’t forget to use Jquery CND otherwise, this code will not work properly.

To validate I simply find the size of the file and make an if condition with a 300000 value which is equal to the 300KB. if the condition is not true then show the message and disable submit button.

To Disable the button here I used the Jquery prop() method. The prop() method sets or returns properties and values of the selected elements.

Full Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload Validation in Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<form>  
    
    <label>Document Name</label> <br>  
    <input type="text"> <br> <br>  

    <label>Please upload Document file size less than 300KB:</label> <br>  
    <input type="file" id="document_id" name="document_name" >
    <span id="file_error_msg"></span> <br> <br>  

    <input type="submit" value="Submit">  

</form>  


<script>
    $(document).ready(function(){
        $("#document_id").change(function(){
            $("#file_error_msg").html("");
            $(".file_upload1").css("border-color","#F0F0F0");
            var file_size = $('#document_id')[0].files[0].size;
            if(file_size>300000) {
                $("#file_error_msg").html("<p style='color:#FF0000'>File size is greater than 300kb</p>");
                $(".file_upload1").css("border-color","#FF0000");
                $(':input[type="submit"]').prop('disabled', true);
                return false;
            }else{
                $(':input[type="submit"]').prop('disabled', false);
            }
        return true;
        });
    });
</script>

</body>
</html>

To here we completed a blog on File Upload Validation in Jquery. Hope I will help you.