Validete File Type and File Size Before Uploading Through Asp.net Fileupload Contol Using jQuery

In this tutorial i am going to explain how to validate file type and file size of the file. or How to uploading image through Asp.Net FileUpload control using jQuery.

This is very common requirement while we working on asp.net project to upload image files such as .jpg, .jpeg, .png, .bmp, .gif etc or document files such as .pdf, .doc, .docx, .xls, .xlsx, .txt, .rtf etc.
And i got the same requirement where user can upload files. But i have to restrict user to upload only certain type of files and of up to specified size.

It can be done both server side and client side. But to check the file type or size of file at server size through code, file must be first uploaded into server and which is very time consuming if the size of the file is large.
So, it will definitely degrade the performance of our webapplication.
To overcome this problem we can validate file type and size at client side using jQuery or JavaScript before actually uploading the file/image.

So, Let's take one example of validate file.

Now, You need to create one simple web form and write this html script.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .error {
            background-color: red;
            font-weight: 300;
            font-size: 16px;
            padding: 3px 6px 3px 6px;
            color: #fff;
            text-align: center;
            white-space: nowrap;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#FileUpload1").change(function () {
                var extension = $(this).val().split('.').pop().toLowerCase();
                var validFileExtensions = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
                if ($.inArray(extension, validFileExtensions) == -1) {
                    $('#errormsg').text("Sorry!! Upload only jpg, jpeg, png, gif, bmp file").show();
                    $(this).replaceWith($(this).val('').clone(true));
                    $('#btnSubmit').prop('disabled', true);
                }
                else {
                    if ($(this).get(0).files[0].size > (32768)) {
                        $('#errormsg').text("Sorry!! Max allowed file size is 32 kb").show();
                        $(this).replaceWith($(this).val('').clone(true));
                        $('#btnSubmit').prop('disabled', true);
                    }
                    else {
                        $('#errormsg').text('').hide();
                        $('#btnSubmit').prop('disabled', false);
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width: 334px">
            <fieldset>
                <legend>How to Validate File Size and Type before upload</legend>
                <br />
                Upload File:
                <asp:FileUpload ID="FileUpload1" runat="server" /><br />
                <br />
                <span id="errormsg" class="error" style="display: none;"></span>
                <br />
                <br />
               <center>
                <asp:Button ID="btnSubmit" BackColor="Green" ForeColor="White" runat="server" Text="Upload" ClientIDMode="Static" Height="46px" Width="91px" />
                 </center>
            </fieldset>
        </div>
    </form>
</body>
</html>

If user selects any other file such as .rar, .zip or larger file than the specified limit then appropriate message will be displayed to user and submit button will be disabled. When a valid file of up to specified size is uploaded then submit button will be enabled.Hear In this Example User can upload file of jpg, jpeg, png, gif, bmp type and up to 32 kb size.

Hear in This Example I have restricted user to upload up to 32kb file. If you want to restrict the file size something other size then replace 32768 with Your size limit in above jquery script.

About Nikunj Satasiya

I am a passionate programmer and a Software Engineer who love developing applications in Microsoft Technologies, blogging and other related technologies like Asp.Net, VB.Net, SEO, Sql Server,My SQL,Asp.Net-MVC, LINQ, C#.Net, Stored Procedures, Ajax, JavaScript, JQuery, xml etc.

Project Plazza

Validete File Type and File Size Before Uploading Through Asp.net Fileupload Contol Using jQuery

About Nikunj Satasiya

Related Post