Safari输入=“文件"不起作用 [英] Safari input='file' doesn't work

问题描述

我有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 {显示:无；不透明度:0;}#mask-button-file {宽度:81px;高度:40px；背景颜色:#f70808;向左飘浮;文本对齐:居中；垂直对齐:中间；行高:40px;margin-left:1px;cursor:pointer;}#mask-button-file:active {背景颜色:#DF0005;} 

解决方案

这是因为输入被设置为 display:none ，并且在野生动物园中存在此问题.而不是将其隐藏，而是将其包装在 height ， width 设置为零的div中.

 < div><输入type ="file" id ="myfile" name =上传"/></div> 

CSS:

  div {宽度:0px；高度:0px；溢出:隐藏；} 

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

您可以参考这篇文章: jQuery触发文件输入以获得更多关于它的选择./p>

I have div which one on click trigger input-file. In other browsers (Chrome, Firefox, IE) it's working but in Safari(5.1.7) it doesn't. Any idea why?

 $(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;
}

解决方案

It's because the input is being set to display:none and this has issue in safari. Instead of hiding it, wrap it inside a div with height, width set to zero.

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

CSS:

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

Another option will be to position the input out of the viewport so that it's not visible.

You can refer this post: Jquery trigger file input for more options about it.

这篇关于Safari输入=“文件"不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！