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="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; }
版权声明：本文为hwaggLee原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。