Tuesday, 23 September 2014

Validate (check) File Size before upload using jQuery in ASP.NET

Hi friends,in this article I will explain about How to validate (check) File Size before upload using jQuery in ASP.NET.
The below code will help you to get the  File Size before upload using jQuery in ASP.NET and restrict or validation for the max file size.
ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Validate (check) File Size before upload using jQuery in ASP.NET</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#FileUpload1").change(function () {
                var fileSize = ($(this).get(0).files[0].size / 1024);
                if (fileSize / 1024 > 1) {
                    if (((fileSize / 1024) / 1024) > 1) {
                        fileSize = (Math.round(((fileSize / 1024) / 1024) * 100) / 100);
                        $("#fileSize").html("File Size is " + fileSize + "Gb");
                    }
                    else {
                        fileSize = (Math.round((fileSize / 1024) * 100) / 100)
                        $("#fileSize").html("File Size is " + fileSize + "Mb");
                    }
                }
                else {
                    fileSize = (Math.round(fileSize * 100)/100)
                    $("#fileSize").html("File Size is " + fileSize + "kb");
               //    $("#fileSize").html("Thanking for selecting a valid file");
                }
                if ($(this).get(0).files[0].size > (1024 * 1024 * 2)) {
                    $("#fileSize").css('color', 'red');
                  // alert("File size should not exceed 2 MB .");
                }
                else {
                    $("#fileSize").css('color', 'green');
                    $("#fileSize").html("File Size is " + fileSize + "kb");
                }
            });
        });
    </script>
    <style type="text/css">
        .failure
        {
            color: red;
        }
       
        .success
        {
            color: green;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Label ID="fileSize" runat="server"> </asp:Label>
    </div>
    </form>
</body>
</html>


The output of the above code as shown in the below figure.

If you upload the file less than 2MB then the file size will be shown as green color.

If you upload the file greater than 2MB then the file size will be shown as red color.



If you uncomment the lines in the above code then the output of the above code as shown in the below figure


You can download the code by clicking on the below Download image. 

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.