Validating File Size Before Form Submit (HTML5)
Written by Saran on October 9, 2013, Updated October 12, 2018Browser Support
For More info click here.- Partly
- 49+
- 61+
- 11.1+
File Size Validation (Client-side)
Here's what I did to an upload form that uses jQuery. When the button is clicked, the Javascript checks whether the client browser supports this feature called File API or not, and then we move to next part where we actually access the size from selected file and decide our next move.JQUERY
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
$('#i_submit').click( function() {
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
//get the file size and file type from file input field
var fsize = $('#i_file')[0].files[0].size;
if(fsize>1048576) //do something if file size more than 1 mb (1048576)
{
alert(fsize +" bites\nToo big!");
}else{
alert(fsize +" bites\nYou are good to go!");
}
}else{
alert("Please upgrade your browser, because your current browser lacks some new features we need!");
}
});HTML
- 1
- 2
<input type="file" value="" id="i_file" />
<input type="button" value="Submit" id="i_submit" />Demo :
Returning File Name, Type and Size
You can easily retrieve other important file variables too. The code below returns name, size and type of the file:JQUERY
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
$('#i_submit').click( function() {
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
//get the file size and file type from file input field
var fsize = $('#i_file')[0].files[0].size;
var ftype = $('#i_file')[0].files[0].type;
var fname = $('#i_file')[0].files[0].name;
if(fsize>1048576) //do something if file size more than 1 mb (1048576)
{
alert("Type :"+ ftype +" | "+ fsize +" bites\n(File: "+fname+") Too big!");
}else{
alert("Type :"+ ftype +" | "+ fsize +" bites\n(File :"+fname+") You are good to go!");
}
}else{
alert("Please upgrade your browser, because your current browser lacks some new features we need!");
}
});Demo :
File type validation (Client-side)
How about restricting file type user can upload?JQUERY
- 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
$('#i_submit').click( function() {
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
//get the file size and file type from file input field
var fsize = $('#i_file')[0].files[0].size;
var ftype = $('#i_file')[0].files[0].type;
var fname = $('#i_file')[0].files[0].name;
switch(ftype)
{
case 'image/png':
case 'image/gif':
case 'image/jpeg':
case 'image/pjpeg':
alert("Acceptable image file!");
break;
default:
alert('Unsupported File!');
}
}else{
alert("Please upgrade your browser, because your current browser lacks some new features we need!");
}
});
