javascript - 跨浏览器样式“选择文件”按钮

Question

这是我的代码：

html:

<form>
    <input id = "file" type="file" />

    <div id="custom_button">custom button</div>
</form>

查询：

$("#custom_button").on("click", function () {
    $("#file").click();    
});

CSS：

#file {
    display: none;
}

但这仅适用于 firefox 和 chrome，在 safari 和 opera 中，单击时custom button，文件选择窗口未调用

演示：http: //jsfiddle.net/J4GdN/

Qusetion：为什么这在野生动物园和歌剧中不起作用？在这些浏览器中进行此操作的替代方法是什么？

Answer 1

Some user agents disallow triggering click on input-file elements by js especially in css display:none. An alternative is this way:

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

Make your input-file tranparent and simulate this with an input-text + image as a layer behind.

Answer 2

另一种选择是使用标准<label>标签，将for属性设置id为<input>.

然后，您可以根据需要隐藏<input>和设置样式<label>。

在我的测试中，这在浏览器中运行良好，因为它是标准功能。