input file 美化的方法
css input[type=file] 样式美化,input上传按钮美化
由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[type=file] 样式美化,input上传按钮美化。
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结。
思路:
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。
代码如下:
DOM结构:
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">点击这里上传文件
</a>
<a href="javascript:;" class="file">选择文件
<input type="file" name="" id="">
</a>
CSS样式1:
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
样式2:
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
修改后如下:
样式二:
备注:对于HTML5之input:file,还可以控制上传的类型的,但是这个是html5的,低版本浏览器不支持,详情请看:HTML5的 input:file上传类型控制 http://www.haorooms.com/post/input_file_leixing
美化后显示文件名
上面美化,把默认显示的文件名也给隐藏掉了,那么如何显示文件名称呢?没关系,我们可以用jquery来获取文件的文件名。
我们可以写个change事件
$(".a-upload").on("change","input[type='file']",function(){
var filePath=$(this).val();
if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
$(".fileerrorTip").html("").hide();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
$(".showFileName").html(fileName);
}else{
$(".showFileName").html("");
$(".fileerrorTip").html("您未上传文件,或者您上传文件类型有误!").show();
return false
}
})
input file 美化的方法的更多相关文章
- WebView中input file的解决方法
public class MyWb extends Activity { /** Called when the activity is first created. */ WebView web; ...
- thinkphp配置rewrite模式访问时不生效 出现No input file specified解决方法
使用thinkphp配置rewire模式的路径访问网站时, 直接复制官网的.htaccess文件的代码复制过去 1 2 3 4 5 6 <IfModule mod_rewrite.c> ...
- input file美化,文件上传
此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...
- input file 美化
<input type='file'>的默认外观实在难看,绝大多数情况都需要对其美化.找了很多资料,目前发现以下方式是最简单的美化方式. 1.将file input用label包裹起来,然 ...
- input file美化
<style> a{display:inline-block; width:100px; height:40px; position:relative; overflow:hidden;} ...
- Input file 文本框美化
HTML原生的input file 上传按钮有多(无)不(力)漂(吐)亮(槽)我就不多说了.大家几乎在项目中都会有遇到图片.等文件需要上传的地方,好看的文件上传按钮会使人身心愉悦(我瞎说的).好了不多 ...
- 伪触发 input file 的click事件
前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...
- Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案
原文地址:Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案 启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:&quo ...
- thinkphp 5.6以上版本出现No input file specified解决办法
打开thinkphp,出现No input file specified. 解决方法:在工程下的.htaccess文件里, 把RewriteRule ^(.*)$ index.php/$1 [QSA, ...
随机推荐
- Ubuntu 安装Consolas字体
下载 YaHei.Consolas https://code.google.com/p/uigroupcode/downloads/list 安装 1.创建文件夹 sudo mkdir -p /usr ...
- mysqldump 导出数据表,和数据
目录 导出数据库表与数据 导出数据表数据 导出多个表数据 只导出数据 只导出创建表的数据 导出数据库表与数据 mysqldump -uroot -p caomall>tmp.sql 导出数据表数 ...
- USACO Section 1.1PROB Your Ride Is Here
题目传送门 不能提交哦 http://www.nocow.cn/index.php/Translate:USACO/ride /* ID: jusonal1 PROG: ride LANG: C+ ...
- mybatis写当天 当月的数据 时间段数据
1 数据库字段pk_time(Varchar) 当天的数据 SELECT * FROM 表 WHERE date(fk_time) = curdate(); 当月的数据 SELECT *FROM 表 ...
- [Codeforces 140C] New Year Snowmen
[题目链接] https://codeforces.com/problemset/problem/140/C [算法] 显然 , 我们每次应优先考虑数量多的雪球 将雪球个数加入堆中 , 每次取出数量前 ...
- 10.06 WZZX Day1总结
今天迎来了WZZX的模拟.打开pdf的时候我特别震惊,出题的竟然是神仙KCZ!没错,就是那个活跃于各大OJ,在各大OJ排名靠前(LOJ Rank1),NOI2018 Rank16进队的kczno1!! ...
- SQLALchemy之创建表,删除表
1.创建引擎 "数据库+第三方模块://用户名:密码@数据库服务端IP:端口号/数据库名?编码" engine = create_engine( "mysql+pymys ...
- JSP:目录
ylbtech-JSP:目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech.c ...
- javascript 模块化编程----模块的写法
一.原始写法 模板就是实现特定功能的一组方法 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. function m1(){ //... } function m2(){ //. ...
- 6章 Models
传统的MVC结构中,有模型这么一个概念.Django中,Models又是怎么一回事呢? 刚才生成的这些乱七八糟的数据迁移就是Django自带的一些应用 INSTALLED_APPS = [ 'djan ...