bootstrap-3-上传图片-列表显示

效果

导入的js和css

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<link th:href="@{/js/bootstrap-fileinput-master/css/fileinput.min.css}" rel="stylesheet"/>
<link th:href="@{/js/bootstrap-fileinput-master/themes/explorer/theme.css}" rel="stylesheet"/>
<link th:href="@{/js/bootstrap-fileinput-master/css/fileinput-rtl.min.css}" rel="stylesheet"/>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script th:src="@{/js/bootstrap-fileinput-master/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput-master/themes/explorer/theme.js}"></script>
<script th:src="@{/js/bootstrap-fileinput-master/js/locales/zh.js}"></script>

html的model

    
    <div class="modal fade" id="loadingFildPdRecommendModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" data-backdrop='static'>
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <span class="modal-title" id="myModalLabel2">上传附件</span>
          </div>
          <div class="modal-body">
              <div class="container" style=" 100%;">
                  <div class="row" >
                  <div class="form-group">
                    <div class="col-sm-12">
                        <input id="fild-pd-recommend" name="file" type="file" multiple="multiple" class="file-loading"/>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>

js

$(function(){
    initRecommentFile();
});
function initRecommentFile(){
    $.post("/pact/findrecommentfile?pdId="+pdId, function (result) {
        var data = result.rows;
        file_upload_Recommend(data);
    });
}

//权益文件上传上传
function file_upload_Recommend(data){
    var preview = [];
    var previewConfig = [];
    for (var i = 0; i < data.length; i++) {
        preview[i]=data[i].prefFinename;
        var o = {};
        o.caption = data[i].prefFinename;
        o.size = "762980";
        o.key = data[i].idStr;
        o.url = "/uact/deletefile?fileid=key&type=1012-0002";//删除地址配置
        previewConfig[i] = o;
    }
    //初始化fileinput控件（第一次初始化）
  $("#fild-pd-recommend").fileinput({
          theme: "explorer",
          uploadUrl: "/uact/uploadfile?type=1012-0002", //上传的地址
          uploadExtraData:{pdId:pdId},
          minFileCount: 0,
          maxFileCount: 20,
          overwriteInitial: false,
          showUpload: true, //是否显示上传按钮
          showCaption: true,//是否显示标题
          showRemove :false, 
          showBrowse:true,
          browseOnZoneClick:true,
          autoReplace:true,//是否替换
          validateInitialCount:true,
          allowedFileExtensions:['jpg', 'pdf', 'xls','png'],
          msgInvalidFileExtension:'上传文件类型错误"{name}".只能上传"{extensions}"类型的文件',
          initialPreview: preview,
          /*initialPreviewAsData: true, // defaults markup  
          uploadExtraData: {
              img_key: "1000",
              img_keywords: "happy, nature",
          
          },*/
          initialPreviewConfig: previewConfig,
          /*initialPreviewConfig: [
              {caption: "Business 1.jpg", size: 762980, url: "/site/file-delete", key: 11},
              {caption: "Business 2.jpg", size: 823782, url: "/site/file-delete", key: 13, previewAsData: false}, 
              {caption: "PDF Sample.pdf", size: 8000, url: "/site/file-delete", key: 14, type: "pdf"}, 
              //{caption: "Lorem Ipsum.txt", type: "text", size: 1430, url: "/site/file-delete", key: 12}, 
              //{type: "video", size: 375000, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: "/site/file-delete", key: 15},  
          ],*/
          preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
          previewFileIcon:'<i class="glyphicon glyphicon-file"></i> &nbsp;',
          previewFileIconSettings: { // configure your icon file extensions
              //'doc': '<i class="fa fa-file-word-o text-primary" ><img src="/img/excel.png"/></i>',
              'xls': '<i class="fa fa-file-excel-o text-success"><img src="/img/excel.png"/></i>',
              //'ppt': '<i class="fa fa-file-powerpoint-o text-danger"><img src="/img/excel.png"/></i>',
              'pdf': '<i class="fa fa-file-pdf-o text-danger"><img src="/img/pdf.png"/></i>',
              //'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
              //'htm': '<i class="fa fa-file-code-o text-info"></i>',
              //'txt': '<i class="fa fa-file-text-o text-info"><img src="/img/excel.png"/></i>',
              //'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
              //'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
              // note for these file types below no extension determination logic 
              // has been configured (the keys itself will be used as extensions)
              'jpg': '<i class="fa fa-file-photo-o text-danger"><img src="/img/jpg.png"/></i>', 
              //'gif': '<i class="fa fa-file-photo-o text-muted"></i>', 
              'png': '<i class="fa fa-file-photo-o text-primary"><img src="/img/jpg.png"/></i>'    
          },
          previewFileExtSettings: { // configure the logic for determining icon file extensions
              'doc': function(ext) {
                  return ext.match(/(doc|docx)$/i);
              },
              'xls': function(ext) {
                  return ext.match(/(xls|xlsx)$/i);
              },
              'ppt': function(ext) {
                  return ext.match(/(ppt|pptx)$/i);
              },
              'zip': function(ext) {
                  return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
              },
              'htm': function(ext) {
                  return ext.match(/(htm|html)$/i);
              },
              'txt': function(ext) {
                  return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
              },
              'mov': function(ext) {
                  return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
              },
              'mp3': function(ext) {
                  return ext.match(/(mp3|wav)$/i);
              },
          }
     }).on('fileclear', function(event) {
            console.log("fileclear");
        }).on('filecleared', function(event) {
            console.log("filecleared");
        }).on('fileloaded', function(event, file, previewId, index, reader) {
            console.log("fileloaded");
        }).on('filereset', function(event) {
            console.log("filereset");
        }).on('filepreremove', function(event, id, index) {
            console.log('id = ' + id + ', index = ' + index);
        }).on('fileremoved', function(event, id, index) {
            console.log('id = ' + id + ', index = ' + index);
        }).on('filepredelete', function(event, key, jqXHR, data) {
            //alert(9);
            /*$.ajax({
                type: "POST",
                cache:false,
                async : true,
                dataType : "json",
                url:  "/uact/deletefile",
                data: {fileid:key,type:'1012-0002'},
                success: function(data){
                    console.log(data);
                    $('#fild-pd-recommend').fileinput('reset');
                }
           });*/
        }).on('filedeleted', function(event, key, jqXHR, data) {
            console.log('Key = ' + key);
        }).on('filesuccessremove', function(event, id) {//上传成功后删除触发
            alert(id);
     }).on("fileuploaded", function(event, data, previewId, index) {
        console.log(data);
    });
}

fileinput在处理上传后删除回调时存在无法与后台匹配的id

原因为fileinput在前端删除后在回调时没有保留file的对象，导致file对象的id丢失，而生成了一个新的id

解决方案：http://blog.csdn.net/xumoqiu/article/details/53081352?locationNum=1&fps=1

列子：http://plugins.krajee.com/file-krajee-explorer-demo