Bootstrap-fileinput组件的主题初始化

最新推荐文章于 2025-04-11 20:33:24 发布

小k铁柱

最新推荐文章于 2025-04-11 20:33:24 发布

阅读量1.5k

点赞数

分类专栏： jquery 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/qq_40890601/article/details/106856704

版权

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何初始化Bootstrap-fileinput组件的主题，重点是解决图标显示问题和兼容性。推荐了详尽的教程资源，并分享了作者在使用过程中遇到的问题，如Awesome图标库的引入和浏览器解析错误。同时，强调了主题文件与Awesome版本的一一对应关系，以及bundle文件中引入顺序的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

宝藏教程地址：https://plugins.krajee.com/file-theme-demo#theme-fas
官方教程：http://www.bootstrap-fileinput.com/useage.html
这部分在网上找资料太少了，发现这个网站的教程可以说是相当详细，一直想做一个能拖拽上传文件的页面，希望能兼容ie，但是这个插件并不兼容，所以我隐藏了缩略图，这样显示已经达到我想要的效果，阅览，多文件和删除。
里面的图标显示用的是awesome，这个耗费了我好多时间，因为浏览器解析地址错误。awesome要在主题文件之前引入。

在这里插入图片描述
注意：这些主题文件是一一对应的，fa对应explorer-fa，fas对应explorer-fas，fas对应awesome的最新版，awesome的官网有说https://fontawesome.dashgame.com/，我用的是4.7.0，也就是fa前缀，这个矢量图标用起来很好。

下面是我的bundle文件，引入顺序不能乱，font-awesome要在theme前面。
在这里插入图片描述
初始化代码在此；

        <div class="form-group row">
            <label class="col-md-2">上传文件</label>
                <div class="file-loading col-md-10">
                    <label>Preview File Icon</label>
                    <input id="file-3" type="file" multiple>
                </div>
     
        </div>
 //文件初始化
        $("#file-3").fileinput({
            theme: "fa",
            uploadUrl: "/file-upload-batch/2",
            hideThumbnailContent: true // hide image, pdf, text or other content in the thumbnail preview

        });