Как заменить кнопку браузера на изображение для элемента управления 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> 

Я надеюсь, что это помогает другим ищет подобное решение.