File Size Validation Using Jquery Example

jQuery · 11-Apr-2023

Hi Guys,

In this blog, i will exmplain how to check file size validation using jquery. we will check file size validation using jquery. I can check file size validation using jquery.Now, we get the file size on the image change event and after we will check the file size, if file size greater than 2mb then it will return the error messages otherwise return the success message.

solution

$(function() {
    $('#image').change(function(){
        if(Math.round(this.files[0].size/(1024*1024)) > 2) {
            alert('Please select image size less than 2 MB');
        }else{
            alert('success');
        }
    });
 });

So you can see here our example.

Example

<!DOCTYPE html>
<html lang="en">
<head>
 <title>File Size Validation Using Jquery Example</title>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body class="bg-dark">
    <div class="continer">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <div class="card">
                    <div class="card-header">
                        <h5>File Size Validation Using Jquery Example</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" name="frmAdd" id="frmAdd">
                            <div class="form-group">
                                <label for="image">Image:</label>
                                 <input type="file" name="image" class="form-control" id="image" value="">
                           </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
 <script>
 $(function() {
    $('#image').change(function(){
        if(Math.round(this.files[0].size/(1024*1024)) > 2) {
            alert('Please select image size less than 2 MB');
        }else{
            alert('success');
        }
    });
 });
 </script>
</html>

It will help you....