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

weixin_46191137

已于 2023-05-13 20:24:49 修改

阅读量907

点赞数 1

文章标签： html 前端 django html5

于 2023-05-13 20:24:02 首次发布

本文链接：https://blog.csdn.net/weixin_46191137/article/details/130661817

版权

在引入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>