jQuery Fileinput Plugin Showcase

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>
<input id="avatar-2" name="avatar-2" type="file" required class="file-no-browse"/>

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() {
    $("#avatar-2").fileinput({
    overwriteInitial: true,
              maxFileSize: 1500,
              showClose: false,
              showCaption: false,
              //showBrowse: false,
              browseOnZoneClick: true,
              showRemove: false,
              removeTitle: 'Cancel or reset changes',
              elErrorContainer: '#kv-avatar-errors-2',
              msgErrorClass: 'alert alert-block alert-danger',
              defaultPreviewContent: '<img src="http://plugins.krajee.com/assets/prod/img/krajee-logo.png" alt="Your Avatar"> <h5 style="color: #ffac09;font-weight:bolder;-webkit-text-stroke: 1.3px;">Add Logo</h5>',
              layoutTemplates: {main2: '{preview} {remove} {browse}'},
              allowedFileExtensions: ["jpg", "png", "gif"]
    });
    $("input[type=file][name=bar]").fileinput("<button>Search...</button>");
    $("input[type=file][name=baz]").fileinput($("#replacement").remove());
});