基于Bootstrap美化html的input框（上传文件）

在引入bootstrap后可通过以下方式美化input
原理就是隐藏原来的input框，然后用一个button根据id设置点击input框事件。

<input type="file"
       id="img"
       name="File"
       class="hidden"
       multiple
       :webkitdirectory="flagWebkitdirectory">
<button type="button" class="btn btn-primary" onclick="document.getElementById('img').click()">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    选择文件
</button>

<input type="submit" id="upload" class="hidden">
<button type="button" class="btn btn-primary" onclick="document.getElementById('upload').click()">
    <span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>
    submit
</button>

美化前

美化后