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;0;z-index:-1" id="inputfile2"/> </body> </html>
问题所在：
1：style="display:none" 2：style="height:0;0;z-index:-1"
解析：在Chrome中将<input type="file"/> 赋予display:none样式之后会导致点击失效。正确的做法是将其宽高设置为0，将其z-index调低，并隐于图片之下（position，本文没添加，根据自己
使用时情况而定）即可。
推荐：用最简单的例子实现jQuery图片即时上传 （您可以参考此文打造一个即时上传的方案）