input file上传文件样式支持html5的浏览器解决方案


Posted in HTML / CSS onNovember 14, 2012

最近在使用画布处理图像像素时用到了file上传控件,发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width,另一个是file上传控件在不同的浏览器下的外观和行为都不一样。
下面是file上传控件在IE10,firefox16,chrome22,opera12,safari5.1.7里的截图:

input file上传文件样式支持html5的浏览器解决方案 
在IE10里,双击输入框或者单击按钮都弹出文件选择框。在其他浏览器里单击输入框,按钮或文字都可以触发文件选择框。
鉴于这种混乱情况,有必要要统一样式和行为。下面是我的兼容性方案。
先看一下最终结果在各浏览器的截图:

input file上传文件样式支持html5的浏览器解决方案
基本思路:创建输入框和按钮模拟file上传控件。将file上传控件设置成透明。让file上传控件与用于模拟的按钮右对齐。修改元素的堆叠顺序,让按钮处于下面,file上传控件在中间,输入框在上面。在文件选择完毕后将file上传控件里的值赋给用于模拟的输入框。
原理:在不同的浏览器里,file上传控件的按钮的height都是可调的,而且file上传控件的右侧都是可以单击的。所以通过调节file上传控件的height,并调整file上传控件的位置(右对齐),可以让file上传控件的可单击区域与用于模拟的按钮完全覆盖。当file上传控件透明时用户单击用于模拟的按钮就触发了文件选择框。但同时file上传控件的堆叠顺序不能先于用于模拟的输入框,不然当用户将鼠标置于所见的输入框上时可能会看到光标不是指示文本而是为一个箭头(而且为一个箭头时单击会弹出文件选择框),用户将感到困惑。
实现:先看看html部分的代码。

复制代码
代码如下:

<div id="file">
<input type="text" value="未选择文件" /><input type="button" value="浏览" /><input type="file" />
</div>

然后是css部分的代码。
复制代码
代码如下:

#file {
position:relative;
width:226px;
height:25px;
border:1px #99f solid;
}
#file input {
font-size:16px;
margin:0;
padding:0;
position:relative;
vertical-align:middle;
outline:none;
}
#file input[type="text"] {
border:3px none;
width:172px;
z-index:4;
}
#file input[type="button"] {
width:54px;
height:25px;
z-index:2;
}
#file input[type="file"] {
position:absolute;
right:0px;
height:25px;
opacity:0;
z-index:3;
}

最后javascript部分,用于把file上传控件获得的文件路径显示到可见的输入框里。
复制代码
代码如下:

window.onload=function(){
var file=document.querySelector("#file input[type='file']");
var text=document.querySelector("#file input[type='text']");
file.addEventListener("change",assign,false);
function assign(){
text.value=file.value;
}
}

欢迎留言交流或指正。
HTML / CSS 相关文章推荐
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 #HTML / CSS
Bootstrap 学习分享
Nov 12 #HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 #HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 #HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 #HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 #HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 #HTML / CSS
You might like
PHP 观察者模式的实现代码
2013/05/10 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python基于DES算法加密解密实例
2015/06/03 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
离婚协议书范本及离婚须知
2014/10/15 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
MySQL Server 层四个日志
2022/03/31 MySQL