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中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php根据年月获取季度的方法
2014/03/31 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php中session与cookie的比较
2015/01/27 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Pytorch之保存读取模型实例
2019/12/30 Python
急诊科护士自我鉴定
2013/10/14 职场文书
外语专业毕业生个人的自荐信
2013/11/19 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
廉洁校园实施方案
2014/05/25 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
葬礼主持词
2015/07/02 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
创业计划书之甜品店
2019/09/18 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python