In this article I will explain with an example, how to validate / check file size before it is uploaded using jQuery Uploadify plugin.
Note: The Uploadify plugin is a Flash based plugin and the modern browser doesn’t support Flash player. Thus, we need to make use HTML5 File API.
 
 
Validating the File Size before upload using jQuery
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
Validate (check) File Size before upload using jQuery Uploadify Plugin in ASP.Net
 
 
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