<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/fileinput.min.css"> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/fileinput.min.js"></script> <script src="js/zh.js"></script> </head> <style> .box { /*width: 1524px;*/ overflow: hidden; color: #555; margin-left: 50px; } .title { padding: 10px 0 30px; } </style> <body> <div class="box"> <div class="container kv-main"> <h3 class="title">风控进件</h3> <h4 style="padding: 10px 0;" class="list-group-item-danger">关联汽车销售合同编号：<span>xxxxxx</span></h4> <form enctype="multipart/form-data" style="margin-top: 20px"> <h4>1.申请表</h4> <div class="form-group"> <input id="file-01" class="file-loading" type="file"> </div> <h4>2.身份证（正反面）</h4> <div class="form-group"> <input id="file-02" class="file-loading" type="file" multiple data-max-file-count="2"> </div> <h4>3.驾驶证</h4> <div class="form-group"> <input id="file-03" class="file-loading" type="file"> </div> <h4>4.工作证明</h4> <div class="form-group"> <input id="file-04" class="file-loading" type="file"> </div> <h4>5.征信报告</h4> <div class="form-group"> <input id="file-05" class="file-loading" type="file" multiple> </div> <h4>6.工资卡或经营走账卡（正面）</h4> <div class="form-group"> <input id="file-06" class="file-loading" type="file" multiple> </div> <h4>7.流水（多图）</h4> <div class="form-group"> <input id="file-07" class="file-loading" type="file" multiple> </div> <h4>8.房产证（多图）</h4> <div class="form-group"> <input id="file-08" class="file-loading" type="file" multiple> </div> <h4>9.结婚证（可选）</h4> <div class="form-group"> <input id="file-09" class="file-loading" type="file"> </div> <h4>10.担保人身份证（正反面 可选）</h4> <div class="form-group"> <input id="file-10" class="file-loading" type="file" multiple> </div> <!--<div class="du-btn">--> <!--<a href="javascript:;" class="btn btn-danger" role="button" style="padding: 6px 38px">保存--> <!--</a>--> <!--<a href="javascript:;" class="btn btn-warning" role="button" style="padding: 6px 38px">--> <!--取消--> <!--</a>--> <!--</div>--> </form> </div> </div> </body> <script> $(function () { initFileInput("file-01"); initFileInput("file-02"); initFileInput("file-03"); initFileInput("file-04"); initFileInput("file-05"); initFileInput("file-06"); initFileInput("file-07"); initFileInput("file-08"); initFileInput("file-09"); initFileInput("file-10"); }) function initFileInput(ctrlName) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //设置语言 uploadUrl: "aa.php", //上传的地址 allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀 // maxFilesNum: 5,//上传最大的文件数量 //uploadExtraData:{"id": 1, "fileName":'123.mp3'}, uploadAsync: true, //默认异步上传 showUpload: true, //是否显示上传按钮 showRemove: true, //显示移除按钮 showPreview: true, //是否显示预览 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: false,//是否显示拖拽区域 //minImageWidth: 50, //图片的最小宽度 //minImageHeight: 50,//图片的最小高度 //maxImageWidth: 1000,//图片的最大宽度 //maxImageHeight: 1000,//图片的最大高度 maxFileSize: 2048,//单位为kb，如果为0表示不限制文件大小 //minFileCount: 0, // maxFileCount: 3, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount: true, previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", layoutTemplates:{ actionUpload:"", //去掉单独上传按钮 // actionDelete:"", // actionZoom:"" } }).on('filepreupload', function (event, data, previewId, index) { //上传中 var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; console.log('文件正在上传'); }).on("fileuploaded", function (event, data, previewId, index) { //一个文件上传成功 alert(1) console.log('文件上传成功！' + data.id); }).on('fileerror', function (event, data, msg) { //一个文件上传失败 alert(2) console.log('文件上传失败！' + data.id); }) } </script> </html>
bootstrap fileinput上传图片前端界面实例
猜你喜欢
转载自blog.csdn.net/ddwddw4/article/details/80097703
今日推荐
周排行