jquery实现简洁文件上传表单样式


Posted in Javascript onNovember 02, 2015

文章开始先告诉大家制作jquery实现简洁文件上传表单样式的简易教程。

效果图:

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实现文件上传表单样式大家会喜欢,并可以应用到自己的项目中。

Javascript 相关文章推荐
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
JS中的多态实例详解
Oct 15 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 #Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 #Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 #Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 #Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 #Javascript
18个非常棒的jQuery代码片段
Nov 02 #Javascript
js实现文件上传表单域美化特效
Nov 02 #Javascript
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
php 过滤危险html代码
2009/06/29 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
Table冻结表头示例代码
2013/08/20 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python语言描述随机梯度下降法
2018/01/04 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
师范应届生教师求职信
2013/11/05 职场文书
给老师的检讨书
2014/02/11 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL