Click here to Skip to main content
12,952,186 members (56,752 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

23.7K views
3 bookmarked
Posted 12 Feb 2011

Check File type at client side – jQuery

, 12 Feb 2011 CPOL
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)

Share

About the Author

Sandeep Ramani
Technical Lead
India India
I write software using Microsoft web technologies since 2008. I have successfully delivered software products for Fortune 500 companies and startups.

Microsoft Certified Technologies Specialist - Web Applications Development with Microsoft .NET Framework 4.

Awarded as Microsoft Community Contributor of the year 2011.

Received several awards at various forums and my various articles got listed as "Article of the day" at ASP.NET Microsoft Official Website https://www.asp.net/

Visit My Blog:
https://ramanisandeep.wordpress.com/


Area of Expertise:
C#, ASP.NET, Web Services, WCF, ASP.NET MVC, SQL Server, WEB API, AngularJS, jQuery

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170525.1 | Last Updated 13 Feb 2011
Article Copyright 2011 by Sandeep Ramani
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid