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 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

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">


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



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" "">

<html xmlns="">

<head runat="server">


    <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) {




                 else {

                     alert("Select a file");








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


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

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





Download Source Code


  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 .

    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from .Net Core Training in Chennai. or learn thru .Net Core Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
      or Es6 Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

  2. Thanks

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