首页 > 代码库 > bootstrap-3-fileinput上传案例
bootstrap-3-fileinput上传案例
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); } });
bootstrap-3-fileinput上传案例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。