javascript - Onclick选择文件在chrome中不起作用

Question

我正在尝试在用户单击按钮时选择文件，但这仅在 chrome 中不起作用

在这里看看我是怎么做到的

$("#upllnk").click(function() {
    $("#ufile").click();
});

这是我的html代码

<a href="#" class="wb" id="upllnk">Select File To Upload</a>
<div style='display:none'><input type='file' name='ufile' id='ufile'/></div>

将 input:file 放入 div 的原因是隐藏该元素。

Answer 1

在Esailija的有用评论之后，我下载了一个便携式版本的谷歌浏览器（8.0.552.215），它确实没有用。

正如 Esailija 建议的那样，您可以使用opacity解决方法

<div style='opacity:0;'><input type='file' name='ufile' id='ufile'/></div>
            ^^^^^^^^^ setting the opacity to 0 "hides" the input element

这是一个工作小提琴

Answer 2

通过 JavaScript 在文件输入上触发点击会触发安全错误（通常在尝试提交表单之后），并且通常不会像您期望的那样工作。这在 IE 和早期版本的 Chrome 和 Firefox 中非常普遍。

我过去通过将输入包装在标签中解决了这个问题。这样，当点击标签时，它将触发输入。

.Foo input { visibility: hidden; }

<label class="Foo">Select File to Upload<input type="file" /></label>