bootstrap-3-fileinput上传案例

效果

 

导入的js和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/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/js/locales/zh.js}"></script>

\

html

<div class="form-group" id="uiIdcardNumber-img">
                                  <div class="col-sm-4">
                                    <a onclick="showUploadIdCardModel()">上传身份证图片</a>
                                    <script type="text/javascript">
                                        function showUploadIdCardModel(){
                                            $('#uiIdcardNumberModel').modal('show');
                                        }
                                    </script>
                                      <input type="hidden" class="form-control" id="uiIdcardNumberImg1" name="uiIdcardNumberImg1"/>
                                      <input type="hidden" class="form-control" id="uiIdcardNumberImg2" name="uiIdcardNumberImg2"/>
                                  </div>
                              </div>





    <div class="modal fade" id="uiIdcardNumberModel" 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="myModalLabel">请上传本人身份证件，确保图片清晰，四角完整</span>
          </div>
          <div class="modal-body">
              <div class="container" style=" 100%;">
                  <div class="row" >
                  <div class="form-group">
                    <div class="col-sm-6">
                        <input id="uiIdcardNumberImg1-file" name="file" class="projectfile"  type="file"/>
                    </div>
                    <div class="col-sm-6">
                        <input id="uiIdcardNumberImg2-file" name="file" class="projectfile"  type="file"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-5">
                    </div>
                    <div class="col-sm-2">
                          <button type="button" id="nqs-add-xiangmu-form-submit" class="btn nqs-btn-inverse" onclick="uiIdcardNumberModel()">完成</button>
                          <script type="text/javascript">
                              function uiIdcardNumberModel(){
                                  $("#uiIdcardNumberModel").modal('hide');
                                  //var uiIdcardNumberImg1 = $("#uiIdcardNumberImg1").val();
                                  //var uiIdcardNumberImg2 = $("#uiIdcardNumberImg2").val();
                              }
                          </script>
                    </div>
                    <div class="col-sm-5">
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>

js

    //初始化fileinput控件（第一次初始化）
    var $file1 = $('#uiIdcardNumberImg1-file').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "/uact/uploadfile", //上传的地址
        uploadExtraData:{"type": '1012-0001'},
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
        /*deleteUrl:"/uact/deletefile",
        deleteExtraData:function() {
            var obj = {};
            var v = $("#uiIdcardNumberImg1").val(result.fileName);
            if( v == null || v == "" || v == undefined ){
                v = "--";
            }
            obj.fileid = v;
            obj.type = '1012-0001';
            return obj;
        },*/
        maxFileCount: 1,
        enctype: 'multipart/form-data',
        showUpload: false, //是否显示上传按钮
        showCaption: false,//是否显示标题
        showRemove :false, 
        showBrowse:false,
        browseOnZoneClick:true,
        autoReplace:true,//是否替换
        validateInitialCount:true,
        browseClass: "btn btn-primary", //按钮样式             
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        layoutTemplates:{
            //actionDelete:'',//设置删除按钮的值为空字符串，则去掉图片上面的缩略删除按钮
            /*actionUpload:''*/
        }
    }).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) {
        console.log('Key = ' + key);
    }).on('filedeleted', function(event, key, jqXHR, data) {
        console.log('Key = ' + key);
    }).on('filesuccessremove', function(event, id) {//上传成功后删除触发
        var v = $("#uiIdcardNumberImg1").val();
        if (v != null && v != "" && v != undefined) {
            $.ajax({
                type: "POST",
                cache:false,
                async : true,
                dataType : "json",
                url:  "/uact/deletefile",
                data: {fileid:v,type:'1012-0001'},
                success: function(data){
                    $("#uiIdcardNumberImg1").val("");
                }
           });
         } else {
             return false; // abort the thumbnail removal
         }
     });
    //上传成功后回调函数(使用jquery绑定一个函数)
    $file1.on("fileuploaded", function(event, data, previewId, index) {
        console.log($file1);
        var result = data.response;
        if( result.success){
            $("#uiIdcardNumberImg1").val(result.fileName);
        }
    });
    
    
    //初始化fileinput控件（第一次初始化）
    $('#uiIdcardNumberImg2-file').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "/uact/uploadfile?type=1012-0001", //上传的地址
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
        maxFileCount: 1,
        enctype: 'multipart/form-data',
        showUpload: false, //是否显示上传按钮
        showCaption: false,//是否显示标题
        showRemove :true, 
        autoReplace:true,//是否替换
        browseClass: "btn btn-primary", //按钮样式             
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        layoutTemplates:{
            actionDelete:'',//设置删除按钮的值为空字符串，则去掉图片上面的缩略删除按钮
            /*actionUpload:''*/
        }
    });
    $("#uiIdcardNumberImg2-file").on("fileuploaded", function(event, data, previewId, index) {
        var result = data.response;
        if( result.success){
            $("#uiIdcardNumberImg2").val(result.fileName);
        }
    });

 修改了部分样式

/* 上传文件 */
.file-preview {
    height: 256px!important;
    margin-bottom: 20px!important;
}
.file-preview .kv-upload-progress {
        display: none!important;
}
.file-preview .kv-upload-progress .progress{
        display: none!important;
}
.file-preview .fileinput-remove{
    margin-right: 20px!important;
    margin-top: 20px!important;
    display:none;
}
.file-preview .file-drop-zone{
    margin:inherit;
}
.file-preview .file-drop-zone>div{
       outline: none!important;
}
.file-preview .file-drop-zone .file-preview-thumbnails{
       /*  height: 100%!important; */
       
}
.file-preview .file-drop-zone .file-preview-thumbnails .krajee-default.file-preview-frame {
       /* margin-top: -23px!important; */
}
.file-preview .file-drop-zone .file-preview-thumbnails .krajee-default.file-preview-frame .kv-file-content {
        height: 100%!important;
}
.file-preview .file-drop-zone .file-preview-thumbnails .file-preview-frame .kv-file-content img{
    height: 115px!important;
    width: 100%!important;
}
.file-preview .file-drop-zone .file-preview-thumbnails .krajee-default.file-preview-frame .krajee-default.file-preview-frame .file-thumbnail-footer{
    height: 165px!important;    
}
.file-preview .file-drop-zone .file-preview-thumbnails .krajee-default.file-preview-frame .krajee-default.file-preview-frame .file-thumbnail-footer .file-footer-caption{
   eight: 22px!important;
   text-overflow: ellipsis!important;    
}
.file-drop-zone-title{
    font-size: 0.6em!important;
}
.uiIdcardNumberImg{
    width: 200px;
    height: 140px;
}