input 上传文件和图片,并以formdata格式上传服务器

在这里插入图片描述
在这里插入图片描述

<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);
            }
        });
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值