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

這是一個工作小提琴

Answer 2

通過JavaScript在文件輸入上觸發單擊會觸發安全性錯誤（通常在嘗試提交表單后），並且通常不會像您期望的那樣工作。 這在IE和早期版本的Chrome和Firefox中非常普遍。

我通過將輸入包裝在標簽中來解決這個問題。 這樣，當單擊標簽時，它將觸發輸入。

.Foo input { visibility: hidden; }

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