Click here to Skip to main content
Click here to Skip to main content

Check File type at client side – jQuery

, 12 Feb 2011
Rate this:
Please Sign up or sign in to vote.
Check File type at client side – jQuery

Whenever we use fileupload control on web pages, the common requirement is to validate its file type and size.

We usually find it difficult to validate file size on client side rather than at server side. As of now, there is no alternative script found that can achieve this. There are certain alternatives to achieve the above validation on client side but that are not browser compatible & as security level changes in browser, it stops functioning, so we are still not at that level of trust that we can check file size at client side using jQuery/JavaScript.

Although it is possible to validate filetype using jquery/JavaScript and I am looking to do some coding for you to achieve the same, I hope this will help some developers to validate file type at client side rather than checking it on server.

Here is the JavaScript code that achieves the above functionality :

 <script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script>

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

        function FileTypeValidate() {

            //get filepath from fileupload control on the page
            var fileUpload = $('#<%=FileUpload1.ClientID %>').val();

            //extracting part of the filename from dot
            var extension = fileUpload.substring(fileUpload.lastIndexOf('.'));

            //valid file type - static
            var ValidFileType = ".jpg , .png , .bmp";
            //or fetch it from config file for flexibility ,
            //we can save valid file type list in web.config also & 
            //fetch it during validation process
            var ValidFileTypeConfig = 
		'<%=ConfigurationManager.AppSettings["ValidFileType"].ToString() %>';

            //check whether user has selected file or not
            if (fileUpload.length > 0) {

                //check file is of valid type or not
                if (ValidFileType.toLowerCase().indexOf(extension) < 0) {
                    alert("please select valid file type...");
                }
                else {
                    alert("file type is valid...");
                    return true;
                }
            }
            else {
                alert("please select file for upload...");
            }
            return false;
        }
    </script>

The above code explains itself a lot so there is no need to discuss further on it.

Here is the HTML markup that shows controls on the page:

    <form id="form1" runat="server">
     <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Upload" 
		OnClientClick="return FileTypeValidate();" />
     </div>
    </form>

This is a very simple, but very common scenario for the web applications & very effective if managed properly…

That's it, hope this will help !!!

Jay Ganesh


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Sandeep Ramani
Software Developer (Senior) Cognizant
India India
Sandeep is a passionate .NET developer.

He is also certified as Microsoft Certified Technologies Specialist - Web Applications Development with Microsoft .NET Framework 4.
 
He is also awarded as Microsoft Community Contributor of the year 2011.
 
He has also received several awards at various forums and his various articles got listed as "Article of the day" at ASP.NET Microsoft Official Website www.asp.net.

He has done MCA from Gujarat University.
 
Visit his Blog:
http://ramanisandeep.wordpress.com/


Area of Expertise:
C#, ASP.NET , AJAX, Java script, JQuery, JSON, XML, Web Services, WCF, SSIS 2005, SQL Server 2005/2008, ASP.NET MVC
 
He is fond of movies, music, cricket, hockey and boxing.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 13 Feb 2011
Article Copyright 2011 by Sandeep Ramani
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid