Bootstrap4文件上传控件美化

最新推荐文章于 2024-09-20 20:51:06 发布

背后有我

最新推荐文章于 2024-09-20 20:51:06 发布

阅读量5.1k

点赞数 1

分类专栏：前端文章标签：文件上传 BootStrap4

本文链接：https://blog.csdn.net/jackaakn/article/details/103910760

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap拯救了不太会html+css的我，同时Bootstrap也太方便了，但是，也有一点受限默认一些功能看不到了，今天用到文件上传控件，HTML默认的和Bootstrap4的自定义的都不太合适。

参考：https://blog.csdn.net/qq_34559890/article/details/89675998

BootStrap4的默认样式

Bootstrap4的自定义的，右端的“Browse”很碍眼，选择上传文件并不显示上传文件的名字，看不到就不确定是否选择了上传文件。

html默认样式

HTML默认的，按钮不是常见Button，没法应用BootStrap4美化，可是右边显示上传文件的文件名。

网上看了一些，最后自己修改了出来，效果如下：

我修改的

代码如下：

<script>
    function loadFile(file){
        $("#filePos").html(file.name);
    }
</script>

<div class="form-group">
    <input type="file" name="fileName" id="file" style="width: 0;height: 0" οnchange="loadFile(this.files[0])"><br>
<!--默认的HTML文件上传控件，onchange属性调用JavaScript读取上传的文件名，修改第二个标签的显示内容，同时设置该上传控件长宽为0不显示，不占用页面控件，或者设置hidden，但是会占用一点空间-->
    <label class="btn btn-info" for="file">上传文件</label>
<!--利用标签的for属性实现点击标签触发文件上传，同时设计成按钮样式-->
    <label id="filePos">未上传</label><!--定义一个显示文件名的标签-->
</div>

目前，可以用了。