jQuery触发器在Safari中无效

Question

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

我在每个浏览器上测试，但是可以正常运行。

$("#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" 页。