jQuery 触发器在 Safari 中不起作用

Question

我有一个输入类型文件，我将其设置为不显示并使用其他按钮来触发它。

我在每个浏览器上进行了测试，除了 Safari 之外都工作正常。

$("#file_button").click(function () {
    $("#image").trigger('click');
});

<input type="button" id="file_button" value="Image">
<input type="file" id="image" style="display:none"/>

Answer 1

这是一个相当常见的问题，尽管实现此目的的正确跨浏览器方法是通过设置 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" 完全在解析页面时没有错误消息。