Check File Size Validation using jQuery
In this article, we will explain to you how to check file (Image) size validation before upload the file 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.
So you can see below our example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html lang="en"> <head> <title>Check File Size Validation using jQuery - XpetPhp</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <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> <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> </head> <body> <div class="container"> <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> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html> |
Please follow and like us:
