CODEWITHSUNDEEP
c#asp.netfile-upload
Mikkel Refsgaard
Mikkel Refsgaard

Reputation: 111

Asp.net C# upload control

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.

Upvotes: 1

Views: 535

Answers (3)

srn
srn

Reputation: 1215

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

Upvotes: 1

Quintin Robinson
Quintin Robinson

Reputation: 82325

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.

Upvotes: 2

Bala R
Bala R

Reputation: 108937

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.

Upvotes: 1

Related Questions