Validation of file size while uploading using JavaScript / jQuery
Last Updated :
14 Dec, 2023
Validation of file size while uploading is important to provide a nice user experience. In this article, we will learn how to implement file size validation by checking file size before uploading using Javascript and jQuery.
Below are both the ways:
- Listen for the change event on the input.
- Check if any file is selected files.length > 0.
- Get the size of the file by files.item(i).size.
- The value will be in bytes. Convert it into any unit you desire, Megabytes in this case by Math.round((filesize/1024)).
- Check if the size follows your desired criteria.
Example:Â This example shows the use of the above-explained approach.
HTML
<!DOCTYPE html>
< html >
< head >
< title >File Validation-1</ title >
</ head >
< body >
< p >
< input type = "file" id = "file"
onchange = "Filevalidation()" />
</ p >
< p id = "size" ></ p >
< script >
Filevalidation = () => {
const fi = document.getElementById('file');
// Check if any file is selected.
if (fi.files.length > 0) {
for (const i = 0; i <= fi.files.length - 1; i++) {
const fsize = fi.files.item(i).size;
const file = Math.round((fsize / 1024));
// The size of the file.
if (file >= 4096) {
alert(
"File too Big, please select a file less than 4mb");
} else if (file < 2048 ) {
alert(
"File too small, please select a file greater than 2mb");
} else {
document.getElementById('size').innerHTML =
'<b>'+ file + '</ b > KB';
}
}
}
}
</ script >
</ body >
</ html >
|
Output:
Approach 2:Â Using jQuery
- In this approach, we will listen for the change event on the input.
- Get the size of the file by this.files[0].size.
- You can round off the obtained value as well by toFixed() method.
- Check if the size follows your desired criteria.
Example: This example shows the use of the above-explained approach.
HTML
<!DOCTYPE HTML>
< html >
< head >
< meta http-equiv = "Content-Type"
content = "text/html; charset=iso-8859-1" />
< title >JQuery File Validation</ title >
< script src =
</ script >
</ head >
< body >
< input id = "file" type = "file" name = "file" />
< p id = "output" ></ p >
< script type = "text/javascript" >
$('#file').on('change', function() {
const size =
(this.files[0].size / 1024 / 1024).toFixed(2);
if (size > 4 || size < 2 ) {
alert("File must be between the size of 2-4 MB");
} else {
$("#output").html('<b>' +
'This file size is: ' + size + " MB" + '</ b >');
}
});
</ script >
</ body >
</ html >
|
Output:Â
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...