html 美化input file,文件上传input file简便美化方案(css)
file,css
文件上传input在各个浏览器里表现形式都不一样:
ie6
ie7,8,9
ff
chrome
这里介绍一种简单实用的,在各种浏览器下表现一致的美化方法,效果如下:
ie6无法美化,只能应用部分效果,如下:
选择文件后(以ff为例,不用浏览器显示的路径不同):
html代码:
复制代码代码如下:
选择文件
css代码:
复制代码代码如下:
body{
font-size: 12px;
text-align: left;
}
.input-text{
height: 23px;
width: 315px;
line-height: 23px;
vertical-align: middle;
background: #FAFBFD;
border:1px solid #d4d4d4;
}
.link-btn{
width: 78px;
height: 25px;
display: inline-block;
line-height: 25px;
text-align: center;
vertical-align: middle;
background: url('./images/btn.png') 0 -110px;
color: #6d767f;
text-decoration: none;
}
.file-uploader-wrap{
position: relative;
width: 405px;
height: 27px;
margin-top: 20px;
}
.file-uploader-wrap-fake{
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 27px;
_display : none;
}
.file-uploader-wrap .file-uploader{
position: relative;
width: 400px;
height: 27px;
text-align: right;
filter : alpha(opacity = 0);
opacity: 0;
z-index: 2;
cursor: pointer;
_filter : none;
_text-align : left;
_line-height : 27px;
}
js代码:
复制代码代码如下:
window.onload = function(){
var fileUploader = document.getElementById('FileUploader');
var pathDisplayer = document.getElementById('PathDisplayer');
if(fileUploader.addEventListener){
fileUploader.addEventListener('change', fileUploaderChangeHandler, false);
}else if(fileUploader.attachEvent){
fileUploader.attachEvent('onclick', fileUploaderClickHandler);
}else{
fileUploader.onchange = fileUploaderChangeHandler;
}
function fileUploaderChangeHandler(){
pathDisplayer.value = fileUploader.value;
}
function fileUploaderClickHandler(){
setTimeout(function(){
fileUploaderChangeHandler();
}, 0);
}
}
在样式方面,采用的是将上传input设置为透明,并且置于文本框和选择文件按钮之上的方法。
.file-uploader中的text-align:right样式是为了将file input置于右边,从而使点击选择文件按钮时可以点击到file input。
js主要作用是选择文件后将路径显示在文本框中。ie7,8只支持file input的click事件,在点击file input时触发,然后利用ie7,8中选择文件对话框出现时会阻断setTimeout的原理,在选择文件后获取file input的值。由于ie6中文件选择对话框并不能阻断setTimeout,无法在选择文件后及时获取到文件路径,所以无法对ie6进行美化。ie9既支持click事件,也支持change事件。ff和chrome只支持change事件,change事件在文件选择之后触发。
选择文件后,就可以进行同步或者异步的文件上传了。
file,css
html 美化input file,文件上传input file简便美化方案(css)相关推荐
- php文件上传css,CSS_文件上传input file简便美化方案(css),文件上传input在各个浏览器里 - phpStudy...
文件上传input file简便美化方案(css) 文件上传input在各个浏览器里表现形式都不一样: ie6 ie7,8,9 ff chrome 这里介绍一种简单实用的,在各种浏览器下表现一致的美化 ...
- 文件上传input简便美化方案
文件上传input在各个浏览器里表现形式都不一样: ie6 ie7,8,9 ff chrome 这里介绍一种简单实用的,在各种浏览器下表现一致的美化方法,效果如下: ie6无法美化,只能应用部分效果, ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- Bootstrap文件上传插件File Input的使用
1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugin ...
- input file文件上传(enctype)
一.浏览器post表单提交 通常的input组件表单提交时,按照form属性提交的其中enctype="application/x-www-form-urlencoded"是默认值 ...
- 【vue开发问题-解决方法】(九)使用element upload自定义接口上传文件,input多文件上传
[vue开发问题-解决方法](九)使用element upload自定义接口上传文件,input多文件上传 参考文章: (1)[vue开发问题-解决方法](九)使用element upload自定义接 ...
- html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
- php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...
最新文章
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
- nginx源码学习资源
- 美国只有两样东西要比中国 贵,一个是智慧财产权,一个是人工
- 软件工程项目冲刺第二天
- 基于JAVA+SpringBoot+Mybatis+MYSQL的药房药品管理系统
- TypeError: ‘builtin_function_or_method‘ object is not subscriptable 报错解决方法
- 苹果Mac 软件出现「意外退出」及「打不开」解决方法
- dell 工作站装linux_个人电脑只装Linux是怎样的体验?
- VS2015安装教程及卸载教程
- “终端服务器超出了最大允许连接数”的解决方法汇总
- 不断改进的FUP TC20H 台式多用途高速冷冻离心机
- JAVA输入五中水果英文名称_水果英文名称大全
- css格式规范stylelint在vscode使用教程(ctrl+s自动智能修复)
- 生意宝,淘宝,唯品会,58同城,去哪儿背后的赚钱生意经(转)
- 有趣python小程序系列之一
- LTE终端分类-LTE UE category
- 神经网络系统的软件实现,人工智能神经网络系统
- 戴尔笔记本win10 linux,戴尔 win10操作系统下安装ubuntu 亲身经历有效
- 华为深度Linux系统使用教程,完全用Deepin Linux工作、学习、娱乐
- 云计算机对环境有哪些要求吗,云计算对服务器有哪些要求
热门文章
- word2007 无格式文本 选择性粘贴 快捷键 定制方法(转)
- AS-简单音乐播放器
- java多线程(详)
- 自编码器微调_自编码(AutoEncoder)模型及几种扩展之三——SDAE
- 计算机故障的现象有哪些,电脑出故障有哪些症状
- requests.request方法的使用
- KUBEADM 搭建集群(2)
- csgo服务器信息很慢,谈谈CS:GO的优化 【网络设置篇】
- 【已解决】svchost(Delivery Optimization)一直不停下载(占带宽、吃流量)
- 苹果手机怎么查看足迹_用了5年苹果手机!才知道查看一个字母就能辨别手机真假...