我有一个输入类型文件,我将它设置为不显示并使用另一个按钮来触发它。
我在每个浏览器上测试,工作正常,但 Safari。
$("#file_button").click(function () {
$("#image").trigger('click');
});
<input type="button" id="file_button" value="Image">
<input type="file" id="image" style="display:none"/>
这是一个相当普遍的问题,尽管正确的跨浏览器实现此问题的方法是使input type="file"
透明并绝对定位在所需的点击元素上方。
像这样的东西:
<div class="file-wrap">
<span>Click me</span>
<input type="file" />
</div>
CSS:
.file-wrap{
position: relative;
}
input[type="file"]{
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
这样,用户会认为他们正在单击您将跨度设置为的任何样式,但是您一直在偷偷摸摸地将文件输入放在其上方。
一个简短的说明:不要把它放在一个<button></button>
- IE 不喜欢这个并且在它解析页面时input type="file"
完全删除没有错误消息。