Validation of file size while uploading using JavaScript / jQuery
In this article, we will learn how to implement file size validation by checking file size before uploading using Javascript and jQuery. This is a demonstration of client-side validation and is implemented to provide a nice user experience. In some cases, client-side validation is a much better method in comparison to the server-side method as it consumes less time.
For instance, if we don’t allow uploading a file more than 4MB or less than 2MB, we could use client-side validation to check that the file the user has chosen follows the given requirements and if it doesn’t, give them a message so they don’t spend all the time uploading the file only to get an error thrown away by the server.
Approach 1:
- 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 1: 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: In the below example, we will learn how to do the same using jQuery.
- 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.
Please Login to comment...