bootstrap-fileinput

1.代码案例下载：https://github.com/kartik-v/bootstrap-fileinput
2.实例：
1).上传

    <form enctype="multipart/form-data">
    <span>资料文件</span>
    
        <div class="file-loading">
            <input id="kv-explorer" type="file" multiple>
        </div>
        <br>
       <input type="hidden"  class="downloadPath"/>
    </form>
    <form class="layui-form layui-form-pane" action="">
 
 <div class="layui-form-item">
    <label class="layui-form-label">主题:</label>
    <div class="layui-input-block">
      <input type="text" name="title" autocomplete="off" placeholder="请输入主题" class="layui-input" lay-verify="required">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">创建人:</label>
    <div class="layui-input-block">
      <input type="text" name="sendName" th:value=${#httpServletRequest.getAttribute('username')} autocomplete="off" disabled="disabled" placeholder="请填写发送人" class="layui-input" lay-verify="required">
    </div>
  </div>
  
   <div class="layui-form-item">
    <label class="layui-form-label">项目名:</label>
    <div class="layui-input-block">
      <select name="demoPath"   lay-filter="projectName" >
        <option value="">请选择一个项目</option>
    </select>     
    </div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" id="remark"></textarea>
    </div>
  </div>
  
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit="" lay-filter="submitaddKbm">提交</button>
  </div>
</form>

<script type="text/javascript">
$(document).ready(function () {
    $.ajax({
        url:basePath+'/pm/listProject',
        dataType:'json',
        success:function(reg){
            for(var i=0;i<reg.objList.length;i++){
                $("select[name='demoPath']").append("<option value='"+reg.objList[i].projectId+"'>"+reg.objList[i].projectName+"</option>");
            }
            layui.use('form', function(){
                  var form = layui.form;
                  form.render();
                  
                });
        }
    })
    
    

    $("#kv-explorer").fileinput({
        'theme': 'explorer-fas',
        'uploadUrl': basePath+'/kbm/upload/' ,
        //overwriteInitial: false,
        enctype:'multipart/form-data',
        uploadAsync: true, //默认异步上传
        initialPreviewAsData: false,
        initialPreview: [], 
        initialPreviewConfig: [ ]
       
    });
    
    $("#kv-explorer").on("fileuploaded", function (event, data, previewId, index) {
        var response = data.response;
     //   alert(response.filePath);
         console.log(response.msg);
         var downpath=$(".downloadPath").val();
         $(".downloadPath").val(downpath+response.msg+",");
         console.log($(".downloadPath").val());
      
       
    });
    $("#kv-explorer").on("filesuccessremove", function (event, data, previewId, index) { 
          console.log("删除" +data);
          var extStart = data.lastIndexOf('_');
          var name=data.substring(extStart+1,data.length);
          
          var dataPath=  $(".downloadPath").val();
          var da=dataPath.split(",");
          var result="";
          for(var i=0;i<da.length;i++){
              if(da[i].indexOf(name )== -1 && da[i]!=''){
                  console.log(da[i]);
                  result+=da[i]+",";
              }
          }
          $(".downloadPath").val(result);
     });
    
});

layui.use(['form', 'layedit', 'laydate'], function(){
      var form = layui.form
      ,layer = layui.layer
        
      //监听提交
      form.on('submit(submitaddKbm)', function(data){
          
          var dataPath=$(".downloadPath").val();
          if(dataPath==null || dataPath==''){
              layer.msg("文件未上传", {icon: 5});
              return false;
          }else{
              var title=$("input[name='title']").val();
              var sendName=$("input[name='sendName']").val();
              var remark=$("#remark").val();
              var demoPath=$("select[name='demoPath']").val();
              console.log(demoPath);
            $.ajax({
                url:basePath+'/kbm/addKbm',
                dataType:'json',
                data:{
                    dataPath:dataPath,
                    title:title,
                    sendName:sendName,
                    remark:remark,
                    demoPath:demoPath
                },
                success:function(res){
                    if(res.flag){
                          //请求成功将路径放入隐藏域
                        
                        layer.msg('新建成功', {icon: 1});
                      }else{
                          //请求失败
                        layer.msg(res.msg, {icon: 5});
                      }
                }
                
            })
            return false;  
          }
          
      });
    
      
    });
</script>

2).页面回显

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>知识管理编辑</title>
 <script th:src="@{/plugins/bootstrap/js/jquery.min.js}"></script>
    
     <!-- Fonts -->
    <link type='text/css' rel="stylesheet" th:href='@{/plugins/bootstrap/css/boostrap-font.css}' />
    <link type='text/css' rel="stylesheet" th:href='@{/plugins/bootstrap/css/boostrap-font-one.css}' />
    <!-- CSS Libs -->
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/bootstrap/css/bootstrap-3.3.4.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/bootstrap/css/font-awesome.min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/bootstrap/css/animate.min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/bootstrap/css/bootstrap-switch.min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/bootstrap/css/checkbox3.min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/bootstrap/css/jquery.dataTables.min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/bootstrap/css/dataTables.bootstrap.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/bootstrap/css/select2.min.css}" />
    
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <link th:href="@{/css/fileinput.css}" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    <link th:href="@{/js/bootstrap-fileinput/themes/explorer-fas/theme.css}" media="all" rel="stylesheet" type="text/css"/>
     <link type="text/css" rel="stylesheet" th:href="@{/plugins/lib/css/style.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/lib/css/themes/flat-blue.css}" />
    
    <script type="text/javascript" th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/plugins/bootstrap/js/bootstrap-growl.min.js}"></script>
<script type="text/javascript" th:src="@{/plugins/bootstrap/js/bootstrap-switch.min.js}"></script>
<script type="text/javascript" th:src="@{/plugins/jquery/js/jquery.datetimepicker.full.js}"></script>
<script type="text/javascript" th:src="@{/plugins/bootstrap/js/md5.js}"></script>
<script type="text/javascript" th:src="@{/plugins/bootstrap/js/jquery.matchHeight-min.js}"></script>
<script type="text/javascript" th:src="@{/plugins/bootstrap/js/jquery.dataTables.min.js}"></script>
<script type="text/javascript" th:src="@{/plugins/bootstrap/js/dataTables.bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/plugins/bootstrap/js/select2.full.min.js}"></script>
<script type="text/javascript" th:src="@{/js/rootPath.js}"></script>
<script type="text/javascript" th:src="@{/plugins/lib/js/app.js}"></script>

<script th:src="@{/layui/layui.js}"></script>

<script th:src="@{/js/bootstrap-fileinput/js/plugins/piexif.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap-fileinput/js/plugins/sortable.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap-fileinput/js/fileinput.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/fr.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/es.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap-fileinput/themes/fas/theme.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap-fileinput/themes/explorer-fas/theme.js}" type="text/javascript"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
   
</head>
<body>

    <form enctype="multipart/form-data">
    <span>资料文件</span>
    
        <div class="file-loading">
           <input id="kv-explorer" type="file" multiple>
        </div>
        <br>
       <input type="hidden"  class="downloadPath"/>
    </form>
    
    <form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
    <label class="layui-form-label">发送人:</label>
    <div class="layui-input-block">
      <input type="text" name="sendName" disabled="disabled" autocomplete="off" placeholder="请填写发送人" class="layui-input" >
    </div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" id="remark"></textarea>
    </div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">更新记录内容:</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" id="updateContent"></textarea>
    </div>
  </div>
  </div>
    <div class="layui-form-item">
    <button class="layui-btn" lay-submit="" lay-filter="updateKbm">提交</button>
  </div>
    </form>
</body>
<script type="text/javascript">
$(document).ready(function () {
var kbmId=GetQueryString("kbmId");
var initprev = new Array(); 

$.ajax({
    url:basePath+'/kbm/previewImg',
    dataType:'json',
    data:{
        kbmId:kbmId
    },success:function(data){
        var initPreviewConfig = new Array();  
        
        if(data[0]!=null){
            for(var i=0;i<data.length;i++){
                var extStart = data[i].lastIndexOf('.');
                var namestart=data[i].lastIndexOf('\\');
                
                var name=data[i].substring(namestart+1,data[i].length);
                var ext = data[i].substring(extStart+1, data[i].length).toUpperCase();
                
                if(ext!='JPG'&&ext!='PNG'&&ext!='BMP'&&ext!='GIF'&&ext!='JPE'){
                    console.log(ext)
                    initPreviewConfig.push({type:ext, size: 8000, caption:name,url:basePath+'/integratenManaged/delFile', key: data[i], downloadUrl:data[i]});
                }else{
                    initPreviewConfig.push({caption: name, size: 762980,url:basePath+'/integratenManaged/delFile', key:data[i], downloadUrl:data[i]});
                }
               
            }
        }
         $("#kv-explorer").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl': basePath+'/kbm/upload/' ,
                //overwriteInitial: false,
                enctype:'multipart/form-data',
                uploadAsync: true, //默认异步上传             
                showPreview :true,  //是否显示预览
                showRemove :true, //显示移除按钮
                showDownload:true,
                overwriteInitial:false,//是否希望覆盖初始预览内容和标题设置
                initialPreview: data,
                initialPreviewAsData: true, // defaults markup  
                initialPreviewConfig: initPreviewConfig,
            })
         
            $("#kv-explorer").on("fileuploaded", function (event, data, previewId, index) {
                var response = data.response;
             //   alert(response.filePath);
                 console.log(response.msg);
                 var downpath=$(".downloadPath").val();
                 $(".downloadPath").val(downpath+response.msg+",");
                 console.log($(".downloadPath").val());
              
               
            });


         $('#kv-explorer').on('filepredelete', function(event, key) {  
             console.log("删除" +key);
             var dataPath=  $(".downloadPath").val();
              var da=dataPath.split(",");
              
              var nameStart = key.lastIndexOf('\\');
              var name=key.substring(nameStart+1,key.length);
              
              var result="";
              for(var i=0;i<da.length;i++){
                  if(da[i].indexOf(name)== -1 && da[i]!=''){
                      console.log(da[i]);
                      result+=da[i]+",";
                  }
              }
              $(".downloadPath").val(result);
         });  
         $("#kv-explorer").on("filesuccessremove", function (event, data, previewId, index) { 
              console.log("删除" +data);
              var extStart = data.lastIndexOf('_');
              var name=data.substring(extStart+1,data.length);
              
              var dataPath=  $(".downloadPath").val();
              var da=dataPath.split(",");
              var result="";
              for(var i=0;i<da.length;i++){
                  if(da[i].indexOf(name )== -1 && da[i]!=''){
                      console.log(da[i]);
                      result+=da[i]+",";
                  }
              }
              $(".downloadPath").val(result);
         });
        

        
    }
})
console.log("初始化"+initprev);

    
});


</script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
var kbmId=GetQueryString("kbmId");
$(function(){
    $.ajax({
        url:basePath+'/kbm/viewKbm',
        dataType:'json',
        data:{
            kbmId:kbmId
        },
        success:function(reg){
            var date=reg.obj;
            
            $("input[name='sendName']").val(date.sendName);
            $("#remark").val(date.remark);
            $(".downloadPath").val(date.dataPath);
            
            console.log(date.dataPath);
            
        }
    })
}) 
layui.use(['form', 'layedit', 'laydate'], function(){
      var form = layui.form
      ,layer = layui.layer
        
      
      //监听提交
      form.on('submit(updateKbm)', function(data){
          var dataPath=$(".downloadPath").val();
          var title=$("input[name='title']").val();
          var sendName=$("input[name='sendName']").val();
          var remark=$("#remark").val();
          var updateContent=$("#updateContent").val();
        $.ajax({
            url:basePath+'/kbm/editKbm',
            dataType:'json',
            data:{
                dataPath:dataPath,
                title:title,
                sendName:sendName,
                remark:remark,
                updateContent:updateContent,
                kbmId:kbmId
            },
            success:function(res){
                if(res.flag){
                      //请求成功将路径放入隐藏域
                    
                    layer.msg('更新成功', {icon: 1});
                  }else{
                      //请求失败
                    layer.msg(res.msg, {icon: 5});
                  }
            }
            
        })
        return false;
      });
    
      
    });

</script>
</html>

3）编辑
后台对比接口

Map<String, List<String>> map = ContrastTool.contrastPath(oldkbm.getDataPath(), kbm.getDataPath());

   public static Map<String, List<String>> contrastPath(String oldPath, String newPath) {
        Map<String, List<String>> map = new HashMap<String, List<String>>();

        List<String> add = new ArrayList<String>();
        List<String> del = new ArrayList<String>();
        List<String> unalt = new ArrayList<String>();

        String[] oldPathArr = oldPath.split(",");
        String[] newPathArr = newPath.split(",");

        List<String> oldlist = new ArrayList<String>();
        List<String> newlist = new ArrayList<String>();
        for (String oldPathStr : oldPathArr) {
            oldlist.add(oldPathStr);
        }
        for (String newPathStr : newPathArr) {
            newlist.add(newPathStr);

        }

        //如果newPath里面有old没有的则是新增的
        for (String newstr : newlist) {
            if (!oldlist.contains(newstr) && !add.contains(newstr)) {
                add.add(newstr);
            }
            if (oldlist.contains(newstr) && !unalt.contains(newstr)) {
                unalt.add(newstr);
            }

        }
        map.put("add", add);
        map.put("unalt", unalt);
        //如果old有，new没有的则是删除的
        for (String old : oldlist) {
            if (!newlist.contains(old) && !del.contains(old)) {
                del.add(old);
            }

        }
        map.put("del", del);
        return map;
    }