我正在测试在不可见的 <input type="file" />
之上使用 div 的想法这样我就可以制作一个精美的文件上传按钮。我见过一些代码,但有些复杂。我想尝试使用 jQuery 来触发 div 容器中输入标签的点击
HTML:
<div id="container"> Click Me!
<input type="file" id="file" />
</div>
Javascript:
$(document).ready( function() {
$('#container').click( function() {
$('#file')[0].click();
})
});
虽然代码在 Chrome 和 IE 上运行正常,但它不能在 Safari 上运行,并且在 Firefox 上有一个有趣的问题:它触发点击两次!知道为什么会这样吗? jQuery 应该是跨平台的,我很困惑。 这是 fiddle
http://jsfiddle.net/kostasd/C4sCs/1/
预先感谢您的帮助!
科斯塔斯
最佳答案
我尝试过的不同可能的解决方案是
- 使用可见性:隐藏;宽度:1px;对于文件输入元素。
The jsfiddle for it is as follow http://jsfiddle.net/C4sCs/36/
仅使用Css调用文件输入点击,根本不使用jquery
#container { border:1px solid #b0b0b0; display: inline-block; position:relative; overflow:hidden; cursor:pointer; } #file { position:absolute; top:0; opacity:0; display:block; }
关于jquery - 使用 jquery 触发隐藏输入文件标签上的点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16320609/