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.

Brijpal Sharma is a web developer with a passion for writing tech tutorials. Learn JavaScript and other web development technology.