您的位置：首页 > 其它

点击图片添加文件在Chrome中使用的兼容问题

2012-08-10 13:38 295 查看

canrun

View Code

<html>
<head>
<title>点击图片添加文件在Chrome中的兼容问题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
</head>
<body>
<img src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg" onclick="getElementById('inputfile1').click()" title="添加图片-失效示例" alt="添加图片-失效示例">
<input type="file" name="image" style="display:none" id="inputfile1"/>

<img src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg" onclick="getElementById('inputfile2').click()" title="添加图片-成功示例" alt="添加图片-成功示例">
<input type="file" name="image" style="height:0;width:0;z-index:-1" id="inputfile2"/>
</body>
</html>

问题所在：
　　1：style="display:none"　　2：style="height:0;width:0;z-index:-1"

解析：在Chrome中将<input type="file"/> 赋予display:none样式之后会导致点击失效。正确的做法是将其宽高设置为0，将其z-index调低，并隐于图片之下（position，本文没添加，根据自己

使用时情况而定）即可。

推荐：用最简单的例子实现jQuery图片即时上传（您可以参考此文打造一个即时上传的方案）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航