<div class="flex">
<div class="file_title">
<span>*</span>
<span>企业贴息申请表<br /><span style="color:#999;">(含企业简介及贷款、还款付息等情况)</span></span>
</div>
<div class="button downExecl0">表格下载</div>
<div class="button upload0" onclick="uploadFile(0)">文件上传</div>
<div class="button down down0" style="display:none;">下载并查看文件</div>
<div class="file_uoload_name uploadName0" style="display:inline-block">提示:请上传加盖印章的扫描件</div>
</div>
<div class="flex">
<div class="file_title">
<span>*</span>
<span>法定代表人身份证</span>
</div>
<div id="card_img_positive" class="upload3" onclick="uploadFile(3)">
<span style="color:#999;font-size:14px;">点击上传身份证正面</span>
<img style="width:100%;height:100%;display:none;" src="" />
</div>
<div id="card_img_back" class="upload4" onclick="uploadFile(4)">
<span style="color:#999;font-size:14px;">点击上传身份证背面</span>
<img style="width:100%;height:100%;display:none;" src="" />
</div>
<div class="button down3" style="display:none;">下载并查看文件</div>
<div class="button down4" style="display:none;">下载并查看文件</div>
<div class="file_uoload_name ">文件名称</div>
</div>
<input type="file" style="display:none" id="file0" />
<!-- accept="image/*" 限制只能上传图片-->
<input type="file" style="display:none" id="file3" accept="image/*" />
<input type="file" style="display:none" id="file4" accept="image/*" />
//手动做点击input上传文件的效果
function uploadFile(index) {
$("#file" + index).click();
}
//绑定上传文件后的校验功能
//本页面不只一个上传文件input,所以使用循环绑定
$('input[type="file"]').each(function(i) {
$('#file' + i).change(function() {
let reg = /^[a-zA-Z]{1,}$/;
let file = $('#file' + i).get(0).files[0];
//检测是否有文件后缀
if (file.name.lastIndexOf('.') < 0) {
layer.msg("文件名格式不正确,请重新上传");
$('#file' + i).val('');
return;
}
let fileType = file.name.slice(file.name.lastIndexOf('.') + 1);
//后缀名不能带有汉字、数字和特殊字符,只能有英文
if (!reg.test(fileType)) {
layer.msg("文件后缀名不正确,请重新上传");
$('#file' + i).val('');
return;
}
if (i == 0 || i == 1) {
//限制文件类型
if (fileType != "xlsx" && fileType != "xls" && fileType != "pdf") {
layer.msg("只能上传后缀名为xlsx、xls、pdf的文件");
$('#file' + i).val('');
return;
}
} else if (i >= 5) {
if (fileType != "txt" && fileType != "docx" && fileType != "pdf" && fileType != "doc") {
layer.msg("只能上传后缀名为txt、docx、doc、pdf的文件");
$('#file' + i).val('');
return;
}
}
if (i == 3) {
//上传图片,并渲染在页面指定位置
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
$('#card_img_positive').css('background-image', '');//因为本页面容器上有背景图片,所以需要清空背景图片
$('#card_img_positive span').hide();//隐藏不需要展示的内容
$('#card_img_positive img').attr('src', reader.result);//配置图片地址,是input的上传图片后返回的base64编码
$('#card_img_positive img').show();//显示上传后的图片
};
}
if (i == 4) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
$('#card_img_back').css('background-image', '');
$('#card_img_back span').hide();
$('#card_img_back img').attr('src', reader.result);
$('#card_img_back img').show();
};
}
//显示上传后的文件名
$('.uploadName' + i).html(file.name);
$('.uploadName' + i).css('display', 'inline');
})
})
//整体提交时必填项的校验
//&&前的校验部分是本页面页面逻辑需求,可以不用
function submit(index) {
if (!information.discountApplicationFilePath && !$('#file0').val()) {
layer.msg("请上传企业贴息申请表");
return;
}
if (!information.frontIdCardFilePath && !$('#file3').val()) {
layer.msg("请上传法定代表人身份证正面");
return;
}
if (!information.reverseIdCardFilePath && !$('#file4').val()) {
layer.msg("请上传法定代表人身份证反面");
return;
}
//使用formData上传文件流
let formData = new FormData();
if ($("#file0")[0].files[0]) {
formData.append("discountApplication", $("#file0")[0].files[0]);
}
if ($("#file3")[0].files[0]) {
formData.append("frontIdCardFileName", $("#file3")[0].files[0]);
}
if ($("#file4")[0].files[0]) {
formData.append("reverseIdCardFileName", $("#file4")[0].files[0]);
}
//增加不是文件流的参数
formData.append("comId", comId);
formData.append("applyId", applyId);
$.ajax({
url: '.....',
type: 'post',
dataType: 'json',
cache: false,//是否缓存文件
data: formData,
processData: false,//必写
contentType: false,//必写
})
.done(function(data) { //上传成功
if (data.status == 200) {
..........................
} else {
layer.msg(data.msg);
}
});
}