如何使用HTML，JS和CSS创建自定义文件上载

Question

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

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.

Answer 1

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();
    });
});

Answer 2

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

Answer 3

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;
}

Answer 4

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.