bootstrap-fileinput，多图片上传踩过的坑

最近由于有多图片上传与回显的需求，所以把bootsrap-input研究了一把，本以为比较简单，按照 api操作即可，谁知坑这么多。

首先，从官网下载了bootstrap-fileinput框架，里面有example；然后官网的options，events,method过了一遍；

example里面的例子，运行，基本正常并满足我们项目的需要。可是当我引入到我们的项目中去时，当加入shopcation:true时，这个时候点击右边的按钮却点击无反应。这个时候问题可能出现 在与我们后台管理系统的兼容性出现了问题；总之大费一般 周折，将bootstrap,jquery挨个换了一遍，并且showcaption :false,才勉强搞定，现把试验成功的代码粘贴如下：

<#--

<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="${contextPath}/resources/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="${contextPath}/resources/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="${contextPath}/resources/js/fileinput.js" type="text/javascript"></script>
<script src="${contextPath}/resources/js/locales/fr.js" type="text/javascript"></script>
<script src="${contextPath}/resources/js/locales/es.js" type="text/javascript"></script>
<script src="${contextPath}/resources/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="${contextPath}/resources/themes/fa/theme.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
-->
<#--
<link href="${contextPath}/resources/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="${contextPath}/resources/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="${contextPath}/resources/themes/fa/theme.js" type="text/javascript"></script>
-->
<style>
    body, div{
        font-size:14px;
    }
</style>
<form enctype="multipart/form-data">
   <br>
    <br>
    <br>
    <input type="hidden" id="contractId" name="contractId" value="${contractId}"/>
    <div class="file-loading">
        <input id="file-0a" type="file" multiple >
    </div>
    <br>
    <div>
        <input id="inputtest" type="file" multiple >
    </div>
</form>



<script>
  var bizid=$("#contractId").val();
    $(document).ready(function () {
        $('#file-0a').fileinput({
            uploadAsync:false,
            language: 'zh', //设置语言
           /* uploadUrl: '${contextPath}/admin/upload/image',//上传的地址*/
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: true,//是否显示标题*!
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: false,//是否显示拖拽区域
            maxFileCount: 5, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"

        })

      /*  $("#input-b1").fileinput();*/
        $("#inputtest").fileinput({
            'theme': 'explorer-fa',
            'uploadUrl': '${contextPath}/contractManage/newImageUpload?contentType=2&contractId='+bizid,
            language: 'zh', //设置语言
            overwriteInitial: false,
            dropZoneEnabled:false,
            showCaption: false,
            showRemove:false,
            showUpload:false,
            initialPreviewAsData: true,
            initialPreview: ${urlList2!}/*[
                "http://lorempixel.com/1920/1080/nature/1",
                "http://lorempixel.com/1920/1080/nature/2",
                "http://lorempixel.com/1920/1080/nature/3"
            ]*/,
            initialPreviewConfig:${captionList2!} /*[
                {caption: "nature-1.jpg",url: "{$url}", key: 1},
                {caption: "nature-2.jpg",width: "120px", url: "{$url}", key: 2},
                {caption: "nature-3.jpg",width: "120px", url: "{$url}", key: 3}
            ]*/
        }).on('fileuploaded', function(event, data, previewId, index) {
            var obj = data.response;
            var deleleUrl ="${contextPath}/contractManage/delImageUpload?contractId="+bizid+"&id="+obj.id;
            $("#"+previewId).find(".kv-file-remove").click(function(){
                $.ajax({
                    url : deleleUrl,
                    type : "post",
                    dataType:"json",
                    success : function(data) {
                        if (data && data.code == '200') {
                            parent.layer.msg("操作成功 ", {icon: 1, time: 1000});
                        }
                        else {
                            parent.layer.msg(data.msg, {icon: 2, time: 1000});
                        }
                        //成功操作

                    },
                    error : function(data) {
                        if (data && data.code == '500') {
                            parent.layer.msg("操作成功 ", {icon: 1, time: 1000});
                        }
                        else {
                            parent.layer.msg(data, {icon: 2, time: 1000});
                        }
                        //异常操作

                    }
                });

            });
        });;

    });
</script>

里面的值 为后台传过来值 ，当然为了直接能显示也可以用注释里面的内容