jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event

Category > ASP.NET || Published on : Wednesday, January 27, 2016 || Views: 7552 || validate the file type and file size of File Upload control


Introduction

Here Pawan Kumar will explain how to jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event?

Description

In previous post I have explained Code Snippets - Sending SMS through ASP.NET, Cascading dropdown in ASP.NET using JQuery Http Handler, How to add current copyright year in ASP.NET, How to avoid a form from double submission using asp.net, Set max length of MultiLine TextBox in ASP.Net, Allow only alphabets in a textbox using javascript in asp.net, and many more articles.

Now I will explain How to jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event

So follow the steps to learn jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event
%@ Page Language="C#" AutoEventWireup="true" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 
    <%--Refer the jQuery library into your web page--%>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function () {
            /* Attach a change event to the file upload control
             to restrict the file type and file size on file selection. */
            $("#fileupload").change(function () {
 
                // Get the file upload control file extension
                var ext = $(this).val().split('.').pop().toLowerCase();
 
                // Create array with the files extensions to upload
                var fileListToUpload = new Array('pdf', 'txt', 'doc', 'docx', 'xls','xlsx');
 
                //Check the file extension is in the array.               
                var isValidFile = $.inArray(ext, fileListToUpload);
 
                // isValidFile gets the value -1 if the file extension is not in the list.  
                if (isValidFile == -1) {
                    ShowMessage('Please select a valid file of type pdf/txt/doc/docx/xls/xlsx.', 'error');
                   $(this).replaceWith($(this).val('').clone(true));
                }
                else {
                    // Restrict the file size to 10 MB.
                    if ($(this).get(0).files[0].size > (1024 * 1024 * 10)) {
                        ShowMessage('File size should not exceed 10MB.', 'error');
                        $(this).replaceWith($(this).val('').clone(true));
                    }
                    else {
                        ShowMessage('Thank you for selecting a valid file.', 'success');
                    }
                }
            });
 
            // Dynamic function to show the messages on the page
            function ShowMessage(message, type) {
 
                if (type == 'success') {
                    $("#fileStatus").removeClass('error');
                    $("#fileStatus").addClass('success');
                }
                else if (type == 'error') {
                    $("#fileStatus").removeClass('success');
                    $("#fileStatus").addClass('error');
                }
                $("#fileStatus").text(message);
            }
 
        });
 
    </script>
    <style>
        .error
        {
            color: red;
            font-size: 17px;
        }
 
        .success
        {
            color: green;
            font-size: 17px;
        }
    </style>
</head>
<body>
    <form id="formFile" runat="server">
        <b>Upload File:</b>
        <asp:FileUpload ID="fileupload" runat="server" /><br />
        <asp:Label ID="fileStatus" Text="" CssClass="error" runat="server" />
    </form>
</body>
</html>

 

Conclusion:

So, In this tutorial we have learned, jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event