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

3 Comments | 592 Views | Post by: Admin | Tags: validate the file type and file size of File Upload control


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


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


Post Comments

if you have some suggestion, question, request on jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event.

Please use the comment box to express your views.

 

Comments:

loading...