Bootstrap File input

Bootstrap file input should behave the same as default input element

by Valerie Ren

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css">
<h3>Test this in chrome</h3>
<h4>Bootstrap file input should behave the same as default input element</h4>
<br>

<h1>Single</h1>
<input type="file">
<br>
    
<div class="fileinput fileinput-new" data-provides="fileinput">
    <span class="btn btn-default btn-file"><span>Choose file</span><input type="file" /></span>
    <span class="fileinput-filename"></span><span class="fileinput-new">No file chosen</span>
</div>

<h1>Multiple</h1>
<input type="file" multiple>
<br>
    
<div class="fileinput fileinput-new" data-provides="fileinput">
    <span class="btn btn-default btn-file"><span>Choose file</span><input type="file" multiple /></span>
    <span class="fileinput-filename"></span><span class="fileinput-new">No file chosen</span>
</div>