Validation of file size while uploading using JavaScript / jQuery Last Updated : 16 Sep, 2024 Comments Improve Suggest changes Like Article Like Report Validating the file size before uploading is an important step in enhancing user experience on a website. It helps prevent large files from being uploaded, which could lead to slow uploads, server overload, or bandwidth issues.Why File Size Validation is ImportantImproves User Experience: Prevents users from uploading files that are too large, saving time and reducing frustration.Optimizes Performance: Helps maintain server performance by avoiding large, unnecessary uploads.Saves Bandwidth: Reduces the amount of data transferred, which can be crucial for users on limited data plans.Below are both the ways:Table of ContentUsing JavaScriptUsing jQueryApproach 1: Using JavaScriptListen 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 jQueryIn 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= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </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: Additional TipsChoose the Right Unit: Convert file sizes to a unit that makes sense for your validation (e.g., KB, MB).Set Reasonable Limits: Decide on an appropriate file size limit based on your server capacity and user needs.Handle Multiple Files: If your input allows multiple file uploads, loop through the files and validate each one individually.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. Comment More infoAdvertise with us Next Article Validation of file size while uploading using JavaScript / jQuery A AnkitMishra16 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions jQuery-Questions Similar Reads File Type Validation while Uploading it using JavaScript File type validation is essential for web applications that allow users to upload files. By checking the file extension on the client side using JavaScript, you can provide a smooth and efficient user experience by quickly notifying users if their file isn't supported. This method is often preferred 3 min read How to upload file without form using JavaScript ? There are several approaches to upload a file without using the form in JavaScript: Approach 1: This approach is to use FormData that can upload a file without using any kind of form. The special thing about this is that network methods, such as fetch, can accept a FormData object as a body. It’s en 2 min read What is Unobtrusive Validation in jQuery? jQuery is a Javascript library. An unobtrusive validation in jQuery is a set of ASP.Net MVC HTML helper extensions.By using jQuery Validation data attributes along with HTML 5 data attributes, you can perform validation to the client-side. Unobtrusive Validation means without writing a lot of valida 2 min read JavaScript WebAPI File.size Property The file.size property is an inbuilt function of file WebAPI which gives the size of a file in bytes. Syntax:let size = instanceOfFile.size;Return Value: It returns a number, containing the size of the file in bytes. Example: This example shows the implementation of the JavaScript WebAPI File.size P 1 min read Preview an image before uploading using jQuery Previewing an image before uploading using jQuery allows users to see the selected image on the webpage before submitting it to the server. This enhances user experience by providing immediate visual feedback, ensuring the correct image is chosen. There are several methods to preview an image before 3 min read Like