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

  ASP.NET   Wednesday, January 27, 2016   1525 | No Comments Yet!!! | No Download | No Demo | Pawan kumar
 Tags: 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


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: