In this article I will explain with an example, how to implement File size restriction validation using JavaScript.
 
 
Validating the File Size before upload using JavaScript
The following HTML Markup consists of an HTML FileUpload, a SPAN and a Button control.
The Button has been assigned a JavaScript OnClick event handler.
When the Upload button is clicked Validate JavaScript function is called.
Inside the Validate JavaScript function, a check is performed whether the size of the file is less than allowed size, if not then, the error message will be displayed in SPAN element.
<input type="file" id="fuUpload" />
<span id="lblMessage" style="color: red;"></span>
<br/>
<input type="button" value="Upload" onclick="return Validate()" />
<scripttype="text/javascript">
    function Validate() {
        var file = document.getElementById("fuUpload");
        var msg = document.getElementById("lblMessage");
        msg.innerHTML = "";
        var size = parseFloat(file.files[0].size);
        var maxSizeKB = 20; //Size in KB.
        var maxSize = maxSizeKB * 1024; //File size is returned in Bytes.
        if (size > maxSize) {
            msg.innerText = "Max file size " + maxSizeKB + "KB allowed.";
            file.value = "";
            return false;
        }
    }
</script>
 
 
Screenshot
Implement File Size Restriction Validation using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code