Asp.net C# upload control

Question

I have created an image upload control, however i'm not satisfied with its look. I only want the button shown not the text box to the left of the button. Is there any way I can just use the normal button control or linkbutton control to to get the file dialog to open.

Quintin Robinson · Accepted Answer · 2011-03-12 16:56:40Z

2

Browsers are extraordinarily restrictive with controlling the styling of the upload inputs to try and mitigate damage that may be caused by tricking users.

That being said, you can do similar to what you are asking but you also must take into account that each browser places the upload button in a different spot and you will be effectively hacking the style in by placing hidden elements here or there and the look/functionality might not be consistent across all browsers.

This article has some of the information you are looking for.

answered Mar 12, 2011 at 16:56

Quintin Robinson

82.6k14 gold badges128 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

srn · Accepted Answer · 2011-03-24 00:01:36Z

1

I got this simple example working in Firefox 4, IE6 and IE9 but unfortunately it doesn't work in Chrome 10.

<script type="text/javascript">
    $(document).ready(function () {
        var cnt = 1; // for interfering id's
        $('#upload').click(function () {

            // adds a new file-browser upload control and calls the AppendFilesToList with file information
            $("#files").append("<input type=\"file\" id=\"fileupload" + cnt + "\" onchange=\"javascript:AppendFilesToList(this.value);\" style=\"display:none;\" />");
            document.getElementById("fileupload" + cnt).click(); // calls the browsers file-upload dialog

            cnt++;
        });
    });
    // appends file information to a div
    function AppendFilesToList(evt) { $("#listfiles").append(evt + "<br/>"); }
</script>

<div id="files"></div>
<div id="listfiles"></div>

<br />

<input type="button" id="upload" value="Select files" />

You can, however, check out these post about styling 's: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom and http://www.quirksmode.org/dom/inputfile.html

answered Mar 24, 2011 at 0:01

srn

1,2159 silver badges22 bronze badges

1 Comment

Mikkel Refsgaard Over a year ago

I tried it and it works in Firefox, but it doesn't work in Opera nor Safari. But basically I just wanted it to work for Firefox. Thanks!

Bala R · Accepted Answer · 2011-03-12 16:55:57Z

1

The way <input type="file" /> is rendered depends on the browser you are using. Check out this post that talks about how to make it uniform but hiding the actual rendering and having your own.

answered Mar 12, 2011 at 16:55

Bala R

109k23 gold badges203 silver badges212 bronze badges

Collectives™ on Stack Overflow

Asp.net C# upload control

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related