In this article, we will explain to you how to check file size validation before upload the file using jQuery. so we will give you a simple example of how to check 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.
<!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:
Nice post. I was checking continuously this weblog and I am
impressed! Extremely useful info particularly the ultimate phase
🙂 I deal with such information a lot. I used to be
seeking this certain info for a very lengthy time. Thanks and good luck.