How Can I Create A Custom File Upload With Only Html, Js And Css

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 searc

Solution 1:

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

HTML

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

CSS

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

JavaScript

$(function(){
    $('#clickme').click(function(){
        $('#uploadme').click();
    });
});

Solution 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

Solution 3:

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.

Solution 4:

another example:

see this Fiddle

HTML:

<div class="button-green"><inputclass="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: 8px10px8px10px;
}

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