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 相关文章推荐
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 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
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
PHP多文件上传实例
2015/07/09 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python实现类继承实例
2014/07/04 Python
python类继承用法实例分析
2014/10/10 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
python selenium操作cookie的实现
2020/03/18 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
python开发一款翻译工具
2020/10/10 Python
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
导游欢送词
2015/01/31 职场文书
2015驻村干部工作总结
2015/04/07 职场文书