In this article I will explain with an example, how to implement File size limit validation using HTML5.
 
 
Validating the size of the file using HTML5
The following HTML Markup consists of an HTML FileUpload, a SPAN and a Button control.
The Button has been assigned a jQuery click event handler.
When the Upload button is clicked, 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" id="btnUupload" value="Upload" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
       $("#btnUupload").bind("click", function () {
            $("#lblMessage").html("");
            var file = $("#fuUpload");
            var size = parseFloat(file[0].files[0].size);
            var maxSizeKB = 20; //Size in KB.
            var maxSize = maxSizeKB * 1024; //File size is returned in Bytes.
            if (size > maxSize) {
                $("#lblMessage").html("Maximum file size " + maxSizeKB + "KB allowed.");
                file.val("");
                return false;
            }
        });
    });
</script>
 
 
Screenshot
Implement File Size Restriction Validation using HTML5
 
 
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