KishoR NaiK: JQuery - Check File Type at Client Side through JQuery

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