Input upload bootstrap style

-This post assume that you know what is bootstrap and how to use it


Actually it is not mine, I found it in the below URL
http://jasny.github.io/bootstrap/javascript/#fileinput


but it is really awesome:

<div class="fileinput fileinput-new input-group" data-provides="fileinput">
  <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
  <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
  <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>

and in the style

.btn-file {

    position: relative;

    overflow: hidden;

}

.btn-file input[type=file] {

    position: absolute;

    top: 0;

    right: 0;

    min-width: 100%;

    min-height: 100%;

    font-size: 100px;

    text-align: left;

    filter: alpha(opacity=0);

    opacity: 0;

    outline: none;

    background: white;

    cursor: inherit;

    display: block;

}

resource: 

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/