网页前端设计

http://www.86y.org

搜索文章

解决input file按钮要点击两次才弹出选择文件窗口

用声音读出全文关注我吧
 2015/5/22 14:14:41 阅读次数:21945

相信很多人都碰到过这个问题,文件上传控件透明后有的要点击两次才能弹出选择文件窗口,这里将将介绍如何避免要双击,只需要单击是可以实现的。 本来一直无心留意这个图片上传file按钮的BUG,因为有时候为了效果好看有时候我们要做点什么比如隐藏input模拟点击。FF可以chrome也可 以,唯独IE不行,报安全错误。所以还是得找方法解决,最终在某网站找到了,只是把input按钮的透明度改为0然后定位到最顶层,虽然透明,不表示没 有,这样点击上传时不影响效果又能实现所要的效果。真心不错。方法其实很简单。下面就介绍如何操作。

示例效果解图如下:

1、特别注意样式的写法。跟文件上传控件的参数

值得注意的是height:130%,font-size:100px,这样显示上传的文字就会变大,把点击的区域变大了,这样就可以单击可以了。样式如下:

.upload{width:100px;height:100px;line-height:100px;position:relative;border:1px solid #ddd;background:#f6f6f6;text-align:center;color:#333;overflow:hidden;}
#fileupload{position:absolute;bottom:0;left:0;font-size:100px;height:130%;width:1000px;z-index:1;opacity:0;filter:alpha(opacity=0);}

2、完整代码如下:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>file点击上传控件</title>
<style>
.upload{width:100px;height:100px;line-height:100px;position:relative;border:1px solid #ddd;background:#f6f6f6;text-align:center;color:#333;overflow:hidden;}
#fileupload{position:absolute;bottom:0;left:0;font-size:100px;height:130%;width:1000px;z-index:1;opacity:0;filter:alpha(opacity=0);}
</style>
</head>

<body>
<div class="upload">
	点击上传
	<input type="file" id="fileupload" size="100" />
</div>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=742【解决input file按钮要点击两次才弹出选择文件窗口】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭