如何用FileUpload控件的圖像替換瀏覽器按鈕？

Question

我在我的頁面中有一個FileUpload控件，如下所示。它默認有一個Browse ...按鈕。我想用具有自定義圖像的ImageButton替換它。任何人都可以告訴我如何實現這一目標？

<td width="40%" valign="top" align="center"> 
       <asp:FileUpload ID="FileUpload1" runat="server" /> 
</td> 

Answer 1

這有點棘手，但這article應該讓你開始在正確的方向。您也可以在jQuery中執行此操作，如here所述。

Answer 2

全部搜索後，我終於遇到了this answer。由於我只需要用圖像替換默認的「選擇文件」按鈕，我刪除了大部分樣式，並更改了標記以適合我的需要。

我結束了：

.file-upload { 
    cursor: pointer;  
} 

.file-upload input { 
    top: 0; 
    left: 0; 
    margin: 0; 
    /* Loses tab index in webkit if width is set to 0 */ 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

<label class="file-upload"> 
    <img src="../myimage.png" /> 
    <asp:FileUpload ID="myfile" runat="server" /> 
</label> 

我希望這可以幫助別人尋找一個類似的解決方案。