Safari 输入 =“文件”不起作用

【问题标题】：Safari input='file' doesn't workSafari 输入 =“文件”不起作用
【发布时间】：2014-09-18 18:25:49
【问题描述】：

我有 div 哪个点击触发输入文件。在其他浏览器（Chrome、Firefox、IE）中，它可以工作，但在 Safari（5.1.7）中却没有。知道为什么吗？

 $(function() {
 $("#mask-button-file").click(function () {
    $("#mask-load-file").trigger('click');
    });
});


<div id="mask-button-file" class="hover active">
        . . .
</div>
<input type="file" id="mask-load-file" name="file1" >

#mask-load-file{
display:none;
opacity:0;
}
#mask-button-file{
width:81px;
height: 40px;
background-color: #f70808;
float:left;
text-align: center;
vertical-align: middle;
line-height: 40px;
margin-left:1px;
cursor:pointer;
}
#mask-button-file:active{
background-color:#DF0005;
}

【问题讨论】：

标签： jquery html file input safari

【解决方案1】：

这是因为输入被设置为display:none，这在 safari 中存在问题。不要隐藏它，而是将其包装在一个 div 中，并将 height、width 设置为零。

<div>
  <input type="file" id="myfile" name="upload"/>
</div>

CSS：

div {
     width: 0px;
     height: 0px;
     overflow: hidden;
    }

另一种选择是将输入放置在视口之外，使其不可见。

您可以参考这篇文章：Jquery trigger file input 了解更多选项。

【讨论】：