Bootstrap FileInput多文件上传IDEA SpringBoot+thymeleaf_thymeleaf bootstrapfileinput-CSDN博客

本文链接：https://blog.csdn.net/zz7_Sunshine/article/details/80443566

最近做文件上传想把界面做好看一点，原装HTML有点丑，H5 CSS3又写不出，偶然间看到强大的Bootstrap fileinput，借鉴了很多案例搜了很多版本试了很多版本，下面是我的心路历程

1.首先下载Bootstrap fileinput

https://github.com/kartik-v/bootstrap-fileinput/

引入必要的css 和 js 注意引入顺序 zh.js是需要引用的中文

    <link rel="stylesheet" href="/js/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/js/bootstrap-fileinput/css/fileinput.css" />
    <script src="/js/jquery/jquery-3.3.1.js"></script>
    <script src="/js/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <script src="/js/layer/layer.js"></script>

2.HTML

<body>
<div style="width: 900px;height: 500px;margin: auto auto;">
    <div class="container-fluid">
        <form id="form" action="upload/UpLoadImage" method="post" enctype="multipart/form-data">
            <div class="row form-group">
                <label class="col-md-4">图片上传:</label>
                <div class="col-sm-12">
                    <input id="input-id" name="file" multiple="multiple" type="file" data-show-caption="true"/>
                </div>
            </div>
        </form>
    </div>
</div>

</body>

如果是用thymeleaf模板有严格的语法检测

multiple = "multiple"

3.js

<script>
        $(function () {
            initFileInput("input-id");
        });
        function initFileInput(ctrlName) {
            var control = $('#' + ctrlName);
            control.fileinput({
                language: 'zh', //设置语言