19

Here is the design of the control I want to create:

sample design

As you can see, it's easy to create the design except the browse button of upload control. I created the rest. I've been searching about changing the place of Browse button but could not find anything useful.

So, how to do that? There was an idea like embedding an unvisible upload control over button but any other advice is golden, thanks.

kubilay
  • 4,247
  • 5
  • 43
  • 65

4 Answers4

48

It's actually not as complicated as you may think. Check out this fiddle. Stylize your button how you will!

HTML

<input type="file" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />

CSS

input[type=file] { 
    width: 1px; 
    visibility: hidden;
}

JavaScript

$(function(){
    $('#clickme').click(function(){
        $('#uploadme').click();
    });
});
Jason
  • 47,815
  • 37
  • 122
  • 180
  • 8
    +1 Good answer. I forked your fiddle. This will display the file name in a textbox next to the button when the file has been selected. http://jsfiddle.net/nKVkM/ – jessegavin Apr 26 '11 at 17:37
  • @jesse yeah i figured i'd leave that part up to the OP as an exercise :) – Jason Apr 26 '11 at 17:39
  • Thanks fellas. Both :) I'll probably work it out with these tutorials' help. Marking jesse's answer because you got a vote up and I can't vote yet ^^ – kubilay Apr 26 '11 at 18:09
  • 4
    @confeng that's not how it works. you accept an answer because it's correct, not because you are trying to spread the love. – Jason Apr 26 '11 at 18:10
  • @Jason That was harsh. Didn't realize you were after fame. – kubilay Apr 26 '11 at 18:16
  • @confeng it wasn't intended to be harsh, just telling you the correct way to do it since it appears that you are new here. i don't care about the points or anything, but if i am a user coming in via google or something and i use an incorrect checked answer, i'm going to lose some trust for this site. – Jason Apr 26 '11 at 18:19
  • Well "spreading love" doesn't seem not-intended to be harsh. Anyway, I just couldn't figure out how to show that both answers are correct. If I'm supposed to mark yours as the right one -according to the system-, just tell me. – kubilay Apr 26 '11 at 18:23
  • 3
    @confeng mark whichever answer you used the most to achieve what you were trying to figure out from your question. if you want, once you gain a bit more rep, you can come back and upvote the other. the idea here is to get CORRECT answers :) no one REALLY cares about points or badges or anything. it's just fun to share knowledge! – Jason Apr 26 '11 at 18:26
  • 4
    To be fair. @Jason is the only one who actually gave you an answer here. It is totally appropriate for you to accept his answer. – jessegavin Apr 26 '11 at 18:40
  • On the surface this seems to work very well, but when I try it on a real form and try to submit the form, IE8 doesn't submit the form the first time I click the submit button. Instead it just clears the file upload control (I had to make it visible to confirm this part), then if I click submit again it works. I'm guessing this is a security feature, trying to avoid people making it not-obvious what you are uploading. – eselk Nov 30 '12 at 04:53
  • More about why this doesn't work: http://stackoverflow.com/questions/3935001/getting-access-is-denied-error-on-ie8 – eselk Nov 30 '12 at 05:16
  • @eselk yes, if you are trying to submit the form using a basic form POST it will not work. however, given that javascript penetration is over 99%, you can programmatically submit your form and not really worry about the three people in the world who have JS turned off. – Jason Nov 30 '12 at 18:38
6

Here's are two excellent articles which shows you how to customize the appearance of file inputs.

jQuery Custom File Upload Input: from the book Designing with Progressive Enhancement by the Filament Group

Styling File Inputs with CSS and the DOM by Shaun Inman

jessegavin
  • 67,411
  • 26
  • 135
  • 162
5

For a solution that does not require JavaScript, you could use a <label>:

<label for="upload">Upload</label>
<input type="file" id="upload" style="position:absolute; visibility:hidden"/>

This won't work in every browser, namely older ones and mobile Safari. To cover these, use the above mentioned JavaScript solution.

Steven Vachon
  • 3,168
  • 1
  • 21
  • 29
4

another example:

see this Fiddle

HTML:

<div class="button-green"><input class="file-upload" type="file">Upload File</div>

CSS:

.button-green
{
    font-family: "Segoe UI","Segoe","Verdana";
    background: #0f9e0a center top no-repeat;
    background-image: linear-gradient(rgb(15, 158, 10), rgb(24, 105, 21)); 
    overflow: hidden;
    color: white;
    border-radius: 5px;
    width: 82px;  
    position: relative; 
    padding: 8px 10px 8px 10px;
}

.button-green:hover
{
    background: #0a8406 center top no-repeat;
    background-image: linear-gradient(rgb(12, 141, 8), rgb(19, 88, 17));     
}

.file-upload
{
    opacity: 0;
    width: 102px;
    height: 35px;
    position: absolute;
    top: 0px;
    left: 0px;
}
user10
  • 4,826
  • 6
  • 38
  • 61