<!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" debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>File Style Demo by http://www.codefans.net</title>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.filestyle.mini.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("input.file_1").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth : 82,
width : 100
});
$("input.file_2").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth : 82,
width : 200
});
$("input.file_3").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth : 82,
width : 300
});
$("input.file_4").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth : 82,
width : 400
});
$("input.file_5").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth : 82,
width : 500
});
$("input.file_20").filestyle({
image: "greyscale_23.gif",
imageheight : 31,
imagewidth : 26
});
});
</script>
<style type="text/css">
.file_1 {
background: #fff;
color: #888;
}
.file_2 {
background: #eee;
color: #111;
}
.file_3 {
background: #eee;
color: #111;
}
.file_4 {
background: #eee;
color: #111;
}
.file_5 {
background: #fff;
color: #888;
}
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<div class="entry">
<h2>Plugin enabled</h2>
<a href="http://www.appelsiini.net/projects/filestyle">File Styled</a> input inherits its class from original
file input. This way you can use CSS for additional styling.
<form action="#">
<input type="file" class="file_1" /><br />
<input type="file" class="file_2" /><br />
<input type="file" class="file_3" /><br />
<input type="file" class="file_4" /><br />
<input type="file" class="file_5" /><br />
</form>
<h2>Plugin disabled</h2>
Same file inputs without plugin.
<form action="#">
<input type="file" /><br />
<input type="file" /><br />
<input type="file" /><br />
<input type="file" /><br />
<input type="file" /><br />
</form>
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-190966-1";
urchinTracker();
</script>
</body>
</html>
表单事件jQuery文件域美化File Style Demo演示
5星 · 超过95%的资源 需积分: 9 177 浏览量
2011-07-27
15:50:03
上传
评论
收藏 22KB RAR 举报 
表单事件jQuery文件域美化File Style Demo演示.rar （4个子文件） 
codefans.net 
choose-file.gif 2KB
jquery.filestyle.mini.js 1KB jquery.min.js 54KB 表单事件File Style Demo.htm 3KB资源评论
mhdyt19882015-08-14喜欢，帮助很大
cawebs2013-04-15很好的例子、
AAA宝龙2015-01-31喜欢哦，我用了不错
atboys2013-08-15不错还挺好用的
abc72621902016-08-24不错 好东西
