jQuery

How to check File Type and Size in jQuery

In this example, how to check File Type and Size in jQuery on Change Event

  • How to check File Type and Size in jQuery.
  • The jquery.min.js library added for jQuery.
  • Input type file select only pdf/jpg/jpeg/png and size not more than 10 MB
<!DOCTYPE html>
<html>
    <head>
	     <script src="https://codeloveguru.com/master-library/js/jquery.min.js"></script>
       <script type="text/javascript">
       $('INPUT[type="file"]').change(function () {
			var ext = this.value.match(/\.(.+)$/)[1];
			switch (ext) {
				case 'pdf':
				case 'jpg':
				case 'jpeg':
				case 'png':
					break;
				default:
					alert('Only pdf/jpg/jpeg/png file type is allowed!');
					this.value = '';
			}
			if(this.files[0].size > 10000000) { // Bytes
			   alert("Please upload file less than 10 MB!");
			   $(this).val('');
			}
		});		
</script>	
</head>
	<body>	
	<label for="files">Inspection Report</label>
  <input type="file" class="form-control" name="report_file" id="report_file">
  <span style="color:red;">Note : - File max size : 10 MB & Type : pdf/jpg/jpeg/png</span>	
	</body>
</html>

One thought on “How to check File Type and Size in jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

× How can I help you?