Safari输入='文件'不起作用

时间:2014-07-27 11:28:44

标签: jquery html file input safari

我有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;
}

1 个答案:

答案 0 :(得分:8)

这是因为输入设置为display:none,这在safari中存在问题。 而不是隐藏它,将其包含在heightwidth设置为零的div中。

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

CSS:

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

另一个选项是将输入定位在视口之外,使其不可见。

您可以参考以下帖子:Jquery trigger file input了解更多相关选项。