<!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>