Stylize input type file using jquery custom plugin

Hi, all, after showing how to Stylize your checkbox using jQuery custom plugin and  Stylize your select box using jQuery plugin. Today I am going to show you how to stylize most important part of html. i.e. Input type file.

To Stylize input type file is toughest part of html component to stylize. Today I’ll guide you how to stylize your input box with your custom jquery plugin

One of most import characteristic of this custom plugin is this, that It runs on almost all the browser including IE7.

So lets start with creating simple html file and add jquery on top of it. Like

1

stylize Input type file jquery plugin<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

After that create new file “filize.js” and add following code in it.

1
2
3
4

	(function($){
		$.fn.filize=function(){
			this.each(function(){
				$(this).wrap("

“); $(this).parent().append(”

“); $(this).parent().find(“div.visiblearea a”).click(function(){ $(this).closest(“div.filize”).find(“input”).trigger(“click”); }); $(this).change(function(){ $(this).closest(“div.filize”).find(“label.filename”).html($(this).val()); }); $(this).hide(); }); } })(jQuery)

Now include this file in html file and call the plugin like below

1
2
3
4
5

<script type="text/javascript" src="filize.js"></script><script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
		jQuery("input[type=file]").filize();	
	});
// ]]></script>

After doing this, lets write some css code to look new file type better

1

After doing all the things your file html file will look something like this.

1
2
3
4
5

stylize Input type file jquery plugin<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="filize.js"></script><script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
		jQuery("input[type=file]").filize();	
	});
// ]]></script>

1

And when you will open this file in browser, your input type file will look something like this.

img

To see demo and download source code click below