如何隐藏FileUpload控件中的“TextBox”?

Question

在我的ASP.NET页面中，我使用了"FileUpload"控件。整个实现过程已经完成并且按照预期工作，但是... 我不想要"FileUpload"中的TextBox控件。（FileUpload=TextBox+Button）

有没有可能只删除/隐藏TextBox，让Button看起来像LinkButton？

谢谢

- Ferhat

---

你尝试过使用控件适配器吗？这里有一个简单的示例代码，可以为您完成工作，而无需 CSS 的巧妙处理 :) http://blog.mathiaskunto.com/2012/01/28/keeping-your-hair-from-turning-gray-or-how-to-style-the-aspfileupload-control-using-control-adapters/ - Steven Mark

Answer 1

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

这肯定会起作用。我在我的项目中尝试过它。它不需要 JavaScript 或 CSS。

- shiba

---

这里没有asp.NET...除此之外很不错。 - Martin Meeser

Answer 2

实际上，您可以使用以下技巧：

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

按钮的宽度为83个像素，文本框的宽度为剩余部分。如果您将控件的宽度强制设置为83个像素，则会显示按钮，而文本框不会显示。

- Adam

---

虽然这种方法可以工作，但它有些不太正规，并且容易出现CSS和/或跨浏览器问题。 - Mani5556

Answer 3

对于与HTML5相关的Asp.Net问题，您可以使用document.getElementById('<%=ServerControlID.ClientID%>')来解决。

我正在使用的代码

HTML5

 <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浏览器。

- kannan

---

请原谅我的JS无知。我将那些代码行复制并粘贴到了我的代码中，并替换了我的FileUpload控件。但是当我进入我的代码后台时，FileUpload1没有PostedFile。 - Jeremy

Answer 4

不是很行。fileUpload控件由于安全原因被隔离在页面之外，所以无法进行样式设置。使用HTML5可以自己实现文件上传，或者你也可以使用Flash，但除此之外，你只能使用浏览器提供的功能。

- Jeremy Hodge

Answer 5

这是可以做到的，但非常麻烦。需要使用一些JavaScript和CSS技巧，将控件设置为不可见，并在其后面放置一张背景图片。

请参考几年前的这个答案。

- smlync