File Size Validation

Submitted by alpha_luna on Wednesday, April 13, 2016 - 16:43.
A simple tutorial that can really help you in an easy way. In this article, we are going to tackle about File Size Validation. There are many ways to use a validation using other languages like PHP, checking the form elements if it is an empty or not. But now, we are going to validate the File Size after clicking the button upload. If the file size exceeding the size that we set our script will surely return an alert. File size must be less than 3MB. File Upload Form This is the HTML source code shows the file input field. 
  1. <center style="padding:20px;">
  2. <form name="form_file_container" id="form_file_container" method="post" action=""  onSubmit="return validate_FileSize();">
  3. <div>
  4. 	<input type="file" name="file" id="file_Form" class="file_typeForm" />
  5. <br />
  6. <br />
  7. 	<span id="file_alert" class="blink_text"></span>
  8. </div>
  9.  
  10. <div>
  11. 	<input type="submit" id="btn_Upload" value="Upload"/>
  12. </div>
  13. </form>
  14. </center>
CSS And, this is the style. 
  1. <style type="text/css">
  2. #form_file_container {
  3. 	border:blue 2px solid;
  4. 	background:#d0d0d0;
  5. 	padding:10px;
  6. 	margin:auto;
  7. 	width:500px;
  8. 	border-radius:8px;
  9. }
  10.  
  11. .file_typeForm {
  12. 	padding:10px;
  13. 	border:#FFF 2px solid;
  14. 	border-radius:4px;
  15. 	background-color:#f0f0f0;
  16. }
  17.  
  18. #file_alert {
  19. 	color: #FF0000;
  20. 	font-size:18px;
  21. }
  22.  
  23. #btn_Upload {
  24. 	background-color:darkgray;
  25. 	padding:10px 40px;
  26. 	margin:15px 0px;
  27. 	color:#FFF;
  28. 	border:#fff 2px solid;
  29. 	border-radius:4px;
  30. 	font-size:18px;
  31. }
  32.  
  33. .blink_text {
  34. -webkit-animation-name: blinker;
  35. -webkit-animation-duration: 1s;
  36. -webkit-animation-timing-function: linear;
  37. -webkit-animation-iteration-count: infinite;
  38.  
  39. -moz-animation-name: blinker;
  40. -moz-animation-duration: 1s;
  41. -moz-animation-timing-function: linear;
  42. -moz-animation-iteration-count: infinite;
  43.  
  44.  animation-name: blinker;
  45.  animation-duration: 1s;
  46.  animation-timing-function: linear;
  47.  animation-iteration-count: infinite;
  48.  
  49.  color:black;
  50. }
  51.  
  52. @-moz-keyframes blinker {  
  53.  0% { opacity: 1.0; }
  54.  50% { opacity: 0.0; }
  55.  100% { opacity: 1.0; }
  56.  }
  57.  
  58. @-webkit-keyframes blinker {  
  59.  0% { opacity: 1.0; }
  60.  50% { opacity: 0.0; }
  61.  100% { opacity: 1.0; }
  62.  }
  63.  
  64. @keyframes blinker {  
  65.  0% { opacity: 1.0; }
  66.  50% { opacity: 0.0; }
  67.  100% { opacity: 1.0; }
  68.  }
  69. </style>
Script Validation This script will help us to check the uploading file whether greater or less than 3MB. If the file is greater than 3MB then the script will surely return an alert. 
  1. <script src="js/code_js.js"></script>
  2. <script>
  3. function validate_FileSize() {
  4. 	$("#file_alert").html("");
  5. 	$(".file_typeForm").css("border-color","#0000ff");
  6. 	var file_size = $('#file_Form')[0].files[0].size;
  7. 	if(file_size>3097152) {
  8. 		$("#file_alert").html("File size is greater than 3 MB");
  9. 		$(".file_typeForm").css("border-color","#FF0000");
  10. 		return false;
  11. 	} 
  12. 	return true;
  13. }
  14. </script>
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 66 views