Validation of file size while uploading using JavaScript / jQuery
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.
Last Updated :
14 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...