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>

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