如何將輸入按鈕鏈接到文件選擇窗口？

可能重複：
Jquery trigger file input 如何將輸入按鈕鏈接到文件選擇窗口？

我工作的一種形式，它允許用戶上傳圖片到網站上。到目前爲止，我已經在Chrome和Safari中使用了拖放解決方案。不過，我還需要支持用戶單擊按鈕並以傳統方式瀏覽文件的操作。

類似於這樣會做：

<input type="file" name="my_file">

然而，而不是笨重的文件描述區域和不可編輯瀏覽按鈕，我寧願使用這樣的：

<input type="button" id="get_file">

我的問題因此是如何使這個按鈕打開一個文件選擇窗口並按照與type="file"一樣的方式處理選擇？

乾杯。

我的解決方案

HTML：

<input type="button" id="my-button" value="Select Files"> 
<input type="file" name="my_file" id="my-file">

CSS：

#my-file { visibility: hidden; }

的jQuery：

$('#my-button').click(function(){ 
    $('#my-file').click(); 
});

到目前爲止在Chrome，Firefox和IE7 +中工作（還沒有試過IE6）。

來源

2012-05-29 diggersworld

還有百萬其他人，但沒有時間選擇最好的複製 – Esailija

檢查此問題http://stackoverflow.com/questions/7132553/jquery-trigger-how-can-i-trigger-the-browse-文件中最投入的時候，我點擊 - 上一個。它可能會幫助你。 – TRR

@Esailija他在哪裏問jQuery？鏈接，但不是愚蠢的。 – rlemon

您可以使用JavaScript並在單擊按鈕輸入時觸發隱藏文件輸入。

http://jsfiddle.net/gregorypratt/dhyzV/ - 簡單

http://jsfiddle.net/gregorypratt/dhyzV/1/ - 票友一點點的JQuery

或者，你可以在CSS樣式的div直接在文件輸入和設置pointer-events爲none允許click事件通過至在花式div後面的文件輸入。這隻適用於某些瀏覽器; http://caniuse.com/pointer-events

來源

2012-05-29 12:22:28 Greg

以前沒有聽說過'pointer-events'。不幸的是，這不是一個好的解決方案，但我希望它可以在早期版本的IE中工作。 jsfiddle解決方案看起來不錯，我會嘗試以及上述建議 – diggersworld

樂意提供幫助您可以爲IE隱藏獨立的CSS位，並將標準文件輸入顯示爲 – Greg

小心顯示：無輸入文件元素。https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ – lenord

如果您希望允許用戶瀏覽文件，您需要擁有input type="file"最接近您的要求的方法是將input type="file"放置在頁面上並隱藏它。然後，觸發輸入的單擊事件單擊該按鈕時：

#myFileInput { 
    display:none; 
} 

<input type="file" id="myFileInput" /> 
<input type="button" 
     onclick="document.getElementById('myFileInput').click()" 
     value="Select a File" />

這裏的a working fiddle。

注：我不會推薦這種方法。 input type="file"是用戶習慣使用上傳文件的機制。

來源

2012-05-29 12:09:20

你不能點擊輸入類型文件來打開文件對話框，也許在Firefox中 – Esailija

適用於Chrome 19/Linux中的我 – rlemon

可能是因爲調用堆棧以用戶操作（例如點擊）開始..但仍然爲什麼這項工作，愚弄某人提供文件訪問權限會很容易 – Esailija

如何將輸入按鈕鏈接到文件選擇窗口？

回答

相關問題