Thursday, June 23, 2011

JQuery - Check File Type at Client Side through JQuery

Whenever we use fileupload control on web pages , the common requirement is to validate its file type.in this article i will show you how to validate File type at client side through JQuery.


Step 1
Download JQuery Script from the following Link
http://code.jquery.com/jquery-1.6.1.min.js

Step 2
Create a Web Application and give the solution name as SolCheckFileType.


Step 3
Drag and Drop FileUpload and button control on page,it is look like this
    
Step 4
Add jQuery file Reference inside the head tag of the page,it is look like this


    <head runat="server">

    <title></title>



    <script language="javascript" src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>



   

</head>

Step 5
Write JQuery script to validate the file type,it is look like this
 


Run the Project


Full Code
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>



    <script language="javascript" src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>



     <script language="javascript" type="text/javascript">



         $(document).ready(function () {



             $("#btnUpload").click(function () {



                // get File Path from FileUpload Control

                 var FileUpload = $("#FileUploadToServer").val();



                 //check whether user has selected file or not

                 if (jQuery.trim(FileUpload).length > 0) {



                     try {

                        

                         // Get Extension from File Name.

                         var GetExtension = FileUpload.substring(FileUpload.lastIndexOf('.'));



                         if (jQuery.trim(GetExtension).length > 0) {



                             // Valid File Type

                             var FileType = ".jpg , .png , .bmp";



                             // Check file type is valid or not

                             if (FileType.toLowerCase().indexOf(GetExtension) < 0) {



                                 alert("Select Valid File Type");

                             }

                             else {



                                 alert("File Type is Valid");

                             }

                         }



                     }

                     catch (e) {



                         alert(e);



                     }





                 }

                 else {

                     alert("Select a file");

                 }



             });



         });   

    </script>

   

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:FileUpload ID="FileUploadToServer" runat="server"/><br />

        <asp:Button ID="btnUpload" runat="server" Text="Upload"/>

    </div>

    </form>

</body>

</html>

Download
Download Source Code

2 comments:

  1. yeah a nice blog to read ..even though the contents are less it has got lot of useful information..I feel that you could have added information about .You can test your knowledge in html by attending HTML Quiz .

    ReplyDelete
  2. Thanks

    JQuery Motto: Write Less Do More.....

    ReplyDelete