jquery实现简洁文件上传表单样式
2015-11-02 14:54
1071 查看
文章开始先告诉大家制作jquery实现简洁文件上传表单样式的简易教程。
效果图:
页面结构:
<div class="uploader white"> <input type="text" class="filename" readonly="readonly"/> <input type="button" name="file" class="button" value="Browse..."/> <input type="file" size="30"/> </div>
css文件样式:
.uploader{ position:relative; display:inline-block; overflow:hidden; cursor:default; padding:0; margin:10px 0px; -moz-box-shadow:0px 0px 5px #ddd; -webkit-box-shadow:0px 0px 5px #ddd; box-shadow:0px 0px 5px #ddd; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .filename{ float:left; display:inline-block; outline:0 none; height:32px; width:180px; margin:0; padding:8px 10px; overflow:hidden; cursor:default; border:1px solid; border-right:0; font:9pt/100% Arial, Helvetica, sans-serif; color:#777; text-shadow:1px 1px 0px #fff; text-overflow:ellipsis; white-space:nowrap; -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px; border-radius:5px 0px 0px 5px; background:#f5f5f5; background:-moz-linear-gradient(top, #fafafa 0%, #eee 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0); border-color:#ccc; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow:0px 0px 1px #fff inset; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .button{ float:left; height:32px; display:inline-block; outline:0 none; padding:8px 12px; margin:0; cursor:pointer; border:1px solid; font:bold 9pt/100% Arial, Helvetica, sans-serif; -moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; border-radius:0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow:0px 0px 1px #fff inset; } .uploader input[type=file]{ position:absolute; top:0; right:0; bottom:0; border:0; padding:0; margin:0; height:30px; cursor:pointer; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity:0; } input[type=button]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;} input[type=button]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;} input[type=text]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;} input[type=text]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}
javascript部分代码:
<script>$(function(){ $("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val($(this).val());}); $("input[type=file]").each(function(){ if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("No file selected...");} }); }); </script>
下载地址: jquery实现简洁文件上传表单样式
希望这款简洁实用的jquery实现文件上传表单样式大家会喜欢,并可以应用到自己的项目中。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- 自动共享和上传文件到兼容的托管站点
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 实现FTP整站上传的批处理代码
- 在线用表单建立文件夹
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- asp防止上传图片木马原理解析
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- 批处理向FTP上传具有指定属性的文件(增量备份)