裏面標籤

Question

要隱藏（但保留功能）按鈕無法打開文件對話框文件對話框醜陋的默認輸入類型的文件按鈕，我使用了以下機制：

HTML：

<label for="file-input"> 
     <i class="fa fa-edit"></i> <!-- acts as file input on click--> 
    </label> 
    <input type="file" id="file-input" /> 

CSS：

#file-input { 
    display: none; //hide the file input 
} 

這是工作果然：我點擊字體真棒編輯ICO n並彈出文件對話框。

但是，當我使用按鈕時，它停止工作。點擊按鈕時我沒有任何文件對話框：

<label for="file-input"> 
     <button type="button">Upload file</button> <!-- not working--> 
    </label> 
    <input type="file" id="file-input" /> 

Answer 1

標籤表示用於在用戶界面的項目的 「註釋」。 你的按鈕不工作的原因是因爲按鈕不是「控制」元素的有效「標題」，因爲它是「控制」元素。 （見：https://developer.mozilla.org/nl/docs/Web/HTML/Element/label）

如果您使用圖像或一塊標籤，將工作中的文字，因爲這將被視爲一個標題（這就是爲什麼你的第一次嘗試工作）。如果你想創建一個自定義按鈕，你可以使用一些文本或圖像標籤，否則你會需要一些JavaScript。

編輯：也許這頁能有所幫助：http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/ 他們使用JavaScript顯示了用戶哪些文件他（她）已經選擇

Answer 2

只需更改jQuery代碼，HTML標籤將保持原樣。

<label for="file-input"> 
     <button class="upload_file" type="button">Upload file</button> <!-- not working--> 
    </label> 
    <input type="file" id="file-input" /> 

jQuery代碼：

jquery("[for=file-input] .upload_file").on("click", function(){ 
    jQuery("#file-input").trigger("click"); 
})