Twitter Bootstrap CSS style for file inputs

bootstrap_file_input.html

<!-- DEMO: http://jsfiddle.net/javieranid/Dpgba/1/ -->

<label class="btn btn-file btn-mini">
    <input type="file" /> <span>Examinar</span>
</label>

<style>
    .btn-file{
        position:relative;
        overflow: hidden;
    }
    .btn-file input[type=file]{
        position: absolute;
        z-index:1;
        top:0;
        left:0;
        right:0;
        bottom:0;
        filter:alpha(opacity=0);
        opacity:0;
        cursor:pointer;
    }
</style>

<script>
    $(function(){
        $('.btn-file input[type=file]').on('change', function(e){
            var $btn = $(this).parent();
    var basename = this.value.replace(/\\/g,"/").split("/").pop();
    if(basename.length > 0){
            var maxChars = 15;
            $btn.addClass('btn-warning').find('span').html(basename.substr(0,maxChars-1) + (basename.length>maxChars?'...':''));
    }
        });
    });
</script>​