Как я могу скрыть «TextBox» элемента управления FileUpload?

Question

На моей странице ASP.NET я использую элемент управления «FileUpload».Все это реализовано и работает как положено, но ... Я не хочу элемент управления TextBox, который является частью "FileUpload".(FileUpload = TextBox + Button)

Возможно ли, что я могу удалить / скрыть только TextBox и позволить кнопке выглядеть как LinkButton?

Спасибо

Answer 1

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Это наверняка сработает.Я пробовал это в моем проекте. Для этого не требуется JavaScript или CSS.

Answer 2

Для Asp.Net с HTML5 вы можете использовать document.getElementById ('<% = ServerControlID.ClientID%>'), чтобы решить эту проблему.

Мой рабочий код

* HTML5 1006 *

 <asp:FileUpload ID="FileUpload1" runat="server" Style="display: none;" />
 <input type="button" value="Browse" onclick="showBrowseDialog()"/>

Javascript

function showBrowseDialog() {
    var fileuploadctrl = document.getElementById('<%=FileUpload1.ClientID%>');
    fileuploadctrl.click();
}

Работает в Firefox, IE и Chrome.

Answer 3

На самом деле, вы можете использовать этот трюк:

FileUpload fileUpload = new FileUpload();
fileUpload.Width = Unit.Pixel(83);

Кнопка имеет размер 83 пикселя, а текстовое поле - остальное. Если вы заставите элемент управления шириной 83 пикселя, кнопка будет показана, а текстовое поле - нет.

Answer 4

Не совсем.Элемент управления fileUpload не поддерживает стиль, так как для безопасности он помещается в «песочницу» со страницы.С HTML5 вы можете загружать свои файлы самостоятельно или использовать Flash, но в противном случае вы застряли на том, что дает вам браузер.

Answer 5

Это можно сделать, но это противно.Он включает в себя некоторые javascript и CSS, чтобы сделать элемент управления невидимым, поместив изображение позади него.

См. Этот ответ пару лет назад.