1

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

我在每个浏览器上测试,工作正常,但 Safari。

$("#file_button").click(function () {
    $("#image").trigger('click');
});
<input type="button" id="file_button" value="Image">
<input type="file" id="image" style="display:none"/>
4

1 回答 1

3

这是一个相当普遍的问题,尽管正确的跨浏览器实现此问题的方法是使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" 完全删除没有错误消息。

于 2013-08-06T10:59:16.400 回答