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;
}
Post a Comment for "How Can I Create A Custom File Upload With Only Html, Js And Css"