效果
导入的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="width: 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;
}