Friday, November 23, 2012
Create stylish file upload button in jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stylish file input</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
// JavaScript Document
jQuery(document).ready(function(){
jQuery('input:file').each(function(){
jQuery(this)
.wrap('<div class="file-wrapper"></div>')
.css({'z-index':1000,'position':'relative','opacity':0,'-khtml-appearance':'none'})
.attr('size', 1)
.before('<span class="file"><label>No file choosen</label></span>')
.change(function(){
var val = jQuery(this).val();
var str = val.split(/[\s/\\]+/);
jQuery(this).prev('span.file').html("<label>"+str[str.length-1]+"</label>");
});
});
});
</script>
<style type="text/css">
.file-wrapper {
clear: both;
display: block;
height: 23px;
margin-bottom: 10px;
position: relative;
}
.file {
background: url("choose.png") no-repeat scroll 0 0 transparent;
font-family: Arial;
font-size: 13px;
height: 30px;
left: 0;
position: absolute;
text-align: left;
width: 400px;
}
.file label {
color: #353535;
float: left;
font-family: Arial;
font-size: 13px;
line-height: 17px;
margin: 0;
font-weight: normal;
padding-left: 110px;
}
.file-input-type{
margin-top:10%;
margin-left:10%;
}
</style>
</head>
<body>
<div class="file-input-type">
<input name="image1" type="file" class="file1">
</div>
</body>
</html>
see the demo here.
Subscribe to:
Post Comments (Atom)
thnx dear bro..
ReplyDeleteits very nice and simple coding..
excellent, great job !!
Thank you..........
Delete