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>

输入输入的原因：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

这是一个有效的fiddle

Answer 2

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

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

.Foo input { visibility: hidden; }

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