JavaScript to validate file size before uploading through asp.net file upload control

validate file size before file upload using javascript in asp.netIntroduction: In this article i am going to explain How to restrict uploading files larger than the maximum specified file size by validating the file size client side using JavaScript when selecting the image/file through asp.net fileupload control.



Description: I am using JavaScript code to check the file size of the file selected by asp.net file upload control and if the file size is more than the maximum allowed size then custom message can be displayed to the user as shown in the demo image above.

Note: In this example, the maximum allowed file size is 1 mb (1048576 bytes). This value can be changed as per requirement.
Below is the HTML Source of the page having file upload control and file size validation implemented.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>File size validation using JavaScript</title>
    <script type="text/javascript">
        function validateFileSize() {
            var uploadControl = document.getElementById('<%= FileUpload1.ClientID %>');
            if (uploadControl.files[0].size > 1048576) {
                document.getElementById('dvMsg').style.display = "block";
                return false;
            }
            else {
                document.getElementById('dvMsg').style.display = "none";
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <fieldset style="width:250px;">
    <legend>Validate file size before upload</legend>
      <asp:FileUpload ID="FileUpload1" runat="server" onchange="validateFileSize();" />
        <div id="dvMsg" style="background-color:Red; color:White; width:190px; padding:3px; display:none;" >
        Maximum size allowed is 1 MB
        </div>   
    </fieldset>     
    </div>
    </form>
</body>
</html> 

Now over to you:
" I hope you have got the way to validate file size before uploading using java script in Asp.Net MVC and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

2 comments

Click here for comments
Anonymous
admin
January 13, 2016 ×

Thank you!!!!!!!

Reply
avatar
February 08, 2016 ×

Thanks for you feedback..I am glad you liked my article..stay connected and keep reading...

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..