input file上传文件样式支持html5的浏览器解决方案
发布时间：2012-11-14 10:23:52 作者：佚名 
我要评论
我要评论最近在使用file上传控件，发现了file上传控件的两个兼容性问题:一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样,本文将提供详细的解决方案
最近在使用画布处理图像像素时用到了file上传控件，发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样。
下面是file上传控件在IE10，firefox16，chrome22,opera12,safari5.1.7里的截图：
<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;
}
}
欢迎留言交流或指正。
下面是file上传控件在IE10，firefox16，chrome22,opera12,safari5.1.7里的截图：
在IE10里，双击输入框或者单击按钮都弹出文件选择框。在其他浏览器里单击输入框，按钮或文字都可以触发文件选择框。
鉴于这种混乱情况，有必要要统一样式和行为。下面是我的兼容性方案。
先看一下最终结果在各浏览器的截图：
基本思路：创建输入框和按钮模拟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;
}
}
欢迎留言交流或指正。
相关文章
- 下面小编就为大家带来一篇使用Html5实现异步上传文件,支持跨域,带有上传进度条。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-17
- 本篇文章主要介绍了HTML5拖拉上传文件的简单实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-11
- 本篇文章主要介绍了HTML5-WebSocket实现多文件同时上传的实例，HTML5结合Websocket进行文件的传输就变得更加方便和灵活，有兴趣的可以了解一下。2016-12-29
- 下面小编就为大家带来一篇html5 实现客户端验证上传文件的大小(简单实例)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-15
- 在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器2013-12-11
- 下面我们使用Html 5的新特性file api实现上传文件，并显示上传文件进度百分比。意图是这样的，当选择文件时，显示当前文件信息2012-08-30
- 本文简单介绍利用Html5的FormData实现文件的异步上传，还可以实现上传进度条和文件大小验证等，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-05-19
最新评论