Asp – fileUpload control appearance

asp.net

I use fileUpload control in asp.net web page, so how could I control the "browse" button, just like any other button?

etc. I want to change "browse button" back color, border style.

Thank you in advance.

Best Answer

how could I control the "browse" button, just like any other button?

What makes you sure there will be a browse button? That's up to the web browser; some might not have a text-plus-browse arrangment at all. In particular Safari arranges the control quite differently.

For reasons of security, and because there is no standardisation about what a file upload control should look like, CSS gives you almost no control of the style of file upload controls.

Whilst the opacity hack mentioned in phoenix's link does kind of work, I wouldn't recommend it at all. There's no guarantee of getting the ‘clickable’ part of the input control lined up with the part of your ersatz control that looks clickable. Even on a single browser, different fonts and other settings will mess it up. For example on my browser with the quirksmode example only the right half of the textbox is clickable to open the browse dialogue; clicking the faux-button does nothing and clicking the left edge of focuses the faux-textbox. With fake-input you will be offering a shoddy and in the worst case broken experience to many of your visitors.

Live with the default upload styling, or augment it with a Flash uploader in the progressive-enhancement manner.

Related Solutions

How to change the Text of the browse button in the FileUpload Control (System.Web.UI.WebControls)

This is old, but wanted to offer another solution. You can use jQuery on a standard HTML hyperlink and fire asp:FileUpload on click of the HREF. Just hide the asp:FileUpload at design and doctor the href any way you'd like.

Link

<a href="#" id="lnkAttachSOW">Attach File</a>

asp:FileUpload

<asp:FileUpload ID="fuSOW" runat="server" style="visibility:hidden;"/>

Then the jQuery:

$("#lnkAttachSOW").click(function () {
    $("#fuSOW").click();
});

Vb.net – Calling browse file window of fileupload control

have you tried this?

<script>
function browse() {
    document.getElementById('<%= FileUpload1.ClientID %>').click();
}
</script>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="browse()"
    ImageUrl="http://stackoverflow.com/favicon.ico" />

Best Answer

Related Solutions

How to change the Text of the browse button in the FileUpload Control (System.Web.UI.WebControls)

Vb.net – Calling browse file window of fileupload control

Related Topic