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.

banner

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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>
<div class="field">
<div class="filebox">
 
<label>Upload file</label> <input type="file" name="file1" />
 
&nbsp;
 
</div>
&nbsp;
 
</div>

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

1
2
3
4
5
6
7
8
	(function($){
		$.fn.filize=function(){
			this.each(function(){
				$(this).wrap("
<div class="filize"></div>
"); $(this).parent().append("
<div class="visiblearea"><label class="filename">Choose File</label><a class="btn" href="javascript:void(0);">Choose</a></div>
"); $(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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style type="text/css"><!--
.filize{
 
}
.visiblearea{
background:url('file.png') no-repeat top left;
width:240px;
height:29px;
}
.visiblearea a{
   display: block;
    float: right;
    height: 31px;
    overflow: hidden;
    text-indent: -1300px;
    width: 40px;
}
label.filename{
  cursor: pointer;
    display: block;
	position:relative;
	overflow:hidden;
line-height:30px;
height:30px;
    width:190px;
	float:left;
	color:#444;
    padding-left:10px;
 
}
--></style>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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>
<style type="text/css"><!--
.filize{
 
}
.visiblearea{
background:url('file.png') no-repeat top left;
width:240px;
height:29px;
}
.visiblearea a{
   display: block;
    float: right;
    height: 31px;
    overflow: hidden;
    text-indent: -1300px;
    width: 40px;
}
label.filename{
  cursor: pointer;
    display: block;
	position:relative;
	overflow:hidden;
line-height:30px;
height:30px;
    width:190px;
	float:left;
	color:#444;
    padding-left:10px;
 
}
--></style>&nbsp;
1
2
3
4
5
6
7
8
9
10
11
<div class="field">
<div class="filebox">
 
<label>Upload file</label> <input type="file" name="file1" />
 
&nbsp;
 
</div>
&nbsp;
 
</div>

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

imgfilebox

To see demo and download source code click below

 

No Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Skip to toolbar