JavaScript file upload size validation
Yes, you can use the File API for this.
Here's a complete example (see comments):
document.getElementById("btnLoad").addEventListener("click", function showFileSize() { // (Can't use `typeof FileReader === "function"` because apparently it // comes back as "object" on some browsers. So just see if it's there // at all.) if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal console.log("The file API isn't supported on this browser yet."); return; } var input = document.getElementById('fileinput'); if (!input.files) { // This is VERY unlikely, browser support is near-universal console.error("This browser doesn't seem to support the `files` property of file inputs."); } else if (!input.files[0]) { addPara("Please select a file before clicking 'Load'"); } else { var file = input.files[0]; addPara("File " + file.name + " is " + file.size + " bytes in size"); }});function addPara(text) { var p = document.createElement("p"); p.textContent = text; document.body.appendChild(p);}body { font-family: sans-serif;}<form action='#' onsubmit="return false;"><input type='file' id='fileinput'><input type='button' id='btnLoad' value='Load'></form>Slightly off-topic, but: Note that client-side validation is no substitute for server-side validation. Client-side validation is purely to make it possible to provide a nicer user experience. For instance, if you don't allow uploading a file more than 5MB, you could use client-side validation to check that the file the user has chosen isn't more than 5MB in size and give them a nice friendly message if it is (so they don't spend all that time uploading only to get the result thrown away at the server), but you must also enforce that limit at the server, as all client-side limits (and other validations) can be circumvented.
Using jquery:
<form action="upload" enctype="multipart/form-data" method="post"> Upload image: <input id="image-file" type="file" name="file" /> <input type="submit" value="Upload" /> <script type="text/javascript"> $('#image-file').bind('change', function() { alert('This file size is: ' + this.files[0].size/1024/1024 + "MiB"); }); </script></form>
Works for Dynamic and Static File Element
Javascript Only Solution
function validateSize(input) { const fileSize = input.files[0].size / 1024 / 1024; // in MiB if (fileSize > 2) { alert('File size exceeds 2 MiB'); // $(file).val(''); //for clearing with Jquery } else { // Proceed further }}<input onchange="validateSize(this)" type="file">