这是我的代码:
html:
<form>
<input id = "file" type="file" />
<div id="custom_button">custom button</div>
</form>
Jquery的:
$("#custom_button").on("click", function () {
$("#file").click();
});
css:
#file {
display: none;
}
但这只适用于firefox和chrome,在safari和opera中,点击custom button
时,选择文件的窗口不会调用
DEMO:http://jsfiddle.net/J4GdN/
Qusetion:为什么这在safari和opera中不起作用?在这些浏览器中制作它的替代方法是什么?
答案 0 :(得分:1)
某些用户代理不允许通过js触发单击输入文件元素,尤其是在css display:none中。另一种方法是这样:
HTML
<input id="file-element" type="file" name="my-file-upload" />
<div id="file-element-replacement">
<input type="text" value="" />
<img alt="custom upload" src="custom-upload.png" />
</div>
CSS
#file-element {
/* if opacity is 0 => some UAs interpret it like display:none */
filter: alpha(opacity=1);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
-moz-opacity: 0.01;
-webkit-opacity: 0.01;
opacity: 0.01;
position: relative;
z-index: 2;
}
#file-element-replacement {
position: relative;
top: -20px;
z-index: 1;
}
使输入文件透明并使用输入文本+图像作为背后的图层进行模拟。
答案 1 :(得分:0)
另一种选择是使用标准<label>
代码,将for
属性设置为id
的{{1}}。
然后,您可以隐藏<input>
并根据需要设置<input>
的样式。
在我的测试中,这在浏览器中非常有效,因为它是标准功能。