jQuery Fileinput Plugin Showcase

by hleinone

HTML

<script src="https://rawgithub.com/javanto/jquery-fileinput/3.1.0/dist/jquery.fileinput.min.js"></script>
<input type="file" name="foo" />
<input type="file" name="bar" />
<input type="file" name="baz" />
<button id="replacement" class="btn">Choose a file</button>

CSS

.fileinput:hover, .fileinput.hover {
    color: #ff00ff;
}

.fileinput:focus, .fileinput.focus {
    color: #00ff00;
}

.fileinput:active, .fileinput.active {
    color: #ff0000;
}

button.btn {
    border: 0;
    color: #ffffff;
    background-color: #ffffff;
    background-image: url('http://www.clker.com/cliparts/u/O/s/T/g/n/aqua-button-th.png');
    width: 100px;
    height: 46px;
    line-height: 46px;
    vertical-align: middle;
    text-align: center;
    font-size: 75%;
}

JavaScript

$(document).ready(function() {
    $("input[type=file][name=foo]").fileinput();
    $("input[type=file][name=bar]").fileinput("<button>Search...</button>");
    $("input[type=file][name=baz]").fileinput($("#replacement").remove());
});