身份证上传示例

来源：互联网发布：装修建材软件知乎编辑：程序博客网时间：2024/05/16 13:54

<%@page import="com.coactsoft.cfp.entity.CustomerStatus"%>
<%@page import="com.coactsoft.cfp.Constant"%>
<%@page import="com.coactsoft.cfp.utils.UserUtils"%>
<%@page import="com.coactsoft.cfp.entity.Customer"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String customerId = UserUtils.getUserId(request);
Customer customer = UserUtils.getUserStatus(request);
if ((customer.getStatus() > CustomerStatus.WYY || customer.getStatusMG() > CustomerStatus.WYY)
|| (customer.getStatus() != CustomerStatus.SCZL && customer.getStatusMG() != CustomerStatus.SCZL)) {
response.sendRedirect(request.getContextPath() + "/my/account/open.jsp");
return;
}
customer = UserUtils.getUserProofInfo(request);
pageContext.setAttribute("customer", customer);
//是否代交开户
Boolean substitute = request.getSession().getAttribute(Constant.SUBSTITUTE_APPOINTMENT) == null ? false : true;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<jsp:include page="/WEB-INF/common/meta.jsp" />
<jsp:include page="/WEB-INF/common/taglib.jsp" />
<title>长复证券--开户--上传资料</title>
<link rel="stylesheet" href="${ctxResource}/css/style.css" />
<link rel="stylesheet" href="${ctxResource}/css/login.css" />
<link rel="stylesheet" href="${ctxResource}/validator/jquery.validator.css" />
<style type="text/css">
.cf-uploader-img a.cf-sfz {
padding-top: 0px;
background: none;
}
.cf-uploader-img a.cf-zhuzhi{
padding-top: 0px;
background: none;
}
.cf-uploader-img img{
margin: 0px auto;
text-align: center;
width: 264px;
height: 168px;
}
#infoForm .n-msg{font-size: 16px;line-height: 28px;margin-left: -65px;}
#infoForm .n-icon{display: none;}
</style>
<jsp:include page="/WEB-INF/common/js.jsp" />
<script type="text/javascript" src="${ctxResource}/plupload/plupload.full.min.js" ></script>
<script type="text/javascript" src="${ctxResource}/validator/jquery.validator.js"></script>
<script type="text/javascript" src="${ctxResource}/validator/local/zh-CN.js"></script>
<script type="text/javascript">
$(function() {
function createUpload(container, browseBtn) {
new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : browseBtn,
container: document.getElementById(container),
url : ctxResource + "/plupload/Upload.jsp",
flash_swf_url : ctxResource + '/plupload/Moxie.swf',
silverlight_xap_url : ctxResource + '/plupload/Moxie.xap',
multipart_params:{'customer':'<%=customerId%>'},
filters : {max_file_num:3, max_file_size:'10mb',mime_types:[{title:"Image files", extensions:"jpg,jpeg,png,gif"}]},

init: {
BeforeUpload: function(up, file) {up.settings.multipart_params.id = file.id;},

FilesAdded: function(up, files) {up.start();},

FileUploaded: function(up, file, info) {
var r = $.parseJSON(info.response);
if (r.result == 'success') {
var c = $("#" + container).addClass("cf-uploader-img");
c.find(".cf-uploader-tip-c").hide();
c.find(".fileInput").val(r.file);
c.find("img").show().attr("src", ctx + r.file);
//c.find(".msg-box").empty().hide();
$('#infoForm').validator('hideMsg', c.find("input"));
}
},

Error: function(up, err) {
if (err.url) window.location.href=err.url;
}
}
}).init();
}

createUpload("cardFrontSide_container", "cardFrontSide_A");
createUpload("cardBackSideUrl_container", "cardBackSideUrl_A");
createUpload("addressProofUrl_container", "addressProofUrl_A");

var rb = $("#next").on("click", function(e) {
$("#infoForm").trigger("validate");
return false;
});

$("#infoForm").validator({
stopOnError: false,
timely: false,
valid:function(form) {
if (rb.prop("disabled"))
return;
//验证暂时不做
rb.prop("disabled", true).addClass("cf-disabled");
$.ajax({
url:service + "/user/uploadInfo",
type:"POST",
dataType: 'json',
data:$("#infoForm").serialize(),
success:function(d) {
rb.prop("disabled", false).removeClass("cf-disabled");
if (d.status == 0) {
d.url = ctx + "/my/line/appointment.jsp";
}
if (d.status == -1)
msg.show().html(d.message);
if (d.url)
window.location.href=d.url;
},
error:function(data) {
rb.prop("disabled", false).removeClass("cf-disabled");
}
});
}
});
});
</script>
</head>
<body id="appointmentOK">

<jsp:include page="/WEB-INF/portal/header1.jsp" />


<div class="main">

<div class="cf-register-img">
<img src="${ctxResource}/img/open-img2.png" />
</div>

<div class="cf-main-top"></div>
<div class="cf-main-cont">
<div class="cf-appointmentOk">
<form id="infoForm" method="post" autocomplete="off" >
<input type="hidden" name="id" value="${customer.id}"/>
<h2 class="cf-h2title">开通账户，需提供您的
<%if (customer.getNationtype() == 0 || customer.getNationtype() == 10) { %>
<span class="color-org">身份证</span>与<span class="color-org">住址证明</span>
<%} else { %>
<span class="color-org">护照照片</span>
<%} %>
</h2>
<p class="cf-fontsize18 cf-txt-center">请按照以下指示进行上传</p>
<div class="cf-news-shenfen">
<h3 class="cf-h2title">上传<%=customer.getNationtype()==20?"护照":"身份证明" %>:</h3>
<p class="cf-fontsize16">所拍证件需四角齐全，字迹清晰，无反光；</p>
<%boolean hasFront = customer.getCardFrontSideUrl() != null && customer.getCardFrontSideUrl().length() > 0;%>
<div class="cf-uploader-cont <%=customer.getNationtype() != 0?"cf-uploader-zhuzhi":"" %> <%=hasFront?"cf-uploader-img":"" %>" id="cardFrontSide_container">
<input type="hidden" class="fileInput" name="cardFrontSideUrl" value="${customer.cardFrontSideUrl }" <%if(!substitute) {%> data-rule="required;" data-msg-required="请上传<%=customer.getNationtype()==20?"护照":"身份证正面" %>" <%} %>/>
<a id="cardFrontSide_A" class="cf-sfz">
<%if (hasFront) { %>
<img src="${ctx}${customer.cardFrontSideUrl}"/>
<div class="cf-uploader-tip-c" style="display: none;">
<%} else { %>
<img style="display: none;"/>
<div class="cf-uploader-tip-c">
<%} %>
<p class="cf-fontsize18">正面</p>
<p>点击上传<%=customer.getNationtype()==20?"护照":"身份证正面" %></p>
</div>
</a>
<div class="cf-uploader-ts cf-color-red">
<span class="msg-box" style="position: static;" for="cardFrontSideUrl"></span>
</div>
</div>
<%
if (customer.getNationtype() == 0) {
boolean hasBack = customer.getCardBackSideUrl() != null && customer.getCardBackSideUrl().length() > 0;
%>
<div class="cf-uploader-cont <%=hasBack?"cf-uploader-img":"" %>" id="cardBackSideUrl_container">
<input type="hidden" class="fileInput" name="cardBackSideUrl" value="${customer.cardBackSideUrl }" <%if(!substitute) {%> data-rule="required;" data-msg-required="请上传身份证反面" <%} %>/>
<a id="cardBackSideUrl_A" class="cf-sfz">
<%if (hasBack) { %>
<img src="${ctx}${customer.cardBackSideUrl}"/>
<div class="cf-uploader-tip-c" style="display: none;">
<%} else { %>
<img style="display: none;"/>
<div class="cf-uploader-tip-c">
<%} %>
<p class="cf-fontsize18">反面</p>
<p>点击上传身份证反面</p>
</div>
</a>
<div class="cf-uploader-ts cf-color-red">
<span class="msg-box" style="position: static;" for="cardBackSideUrl"></span>
</div>
</div>
<%} %>
</div>

<%if(customer.getNationtype() == 0 || customer.getNationtype() == 10) { %>
<div class="cf-news-shenfen">
<h3 class="cf-h2title">上传住址证明:</h3>
<p class="cf-fontsize16">请上传三个月内的有效住址证明，且其中的地址必须与填写资料时提交的地址一致；</p>
<%if(customer.getNationtype() == 0) {%>
<p class="cf-fontsize16 cf-color-red">Tips: 住址与身份证地址不符时需上传。</p>
<%} %>
<%boolean hasAddress = customer.getAddressProofUrl() != null && customer.getAddressProofUrl().length() > 0;%>
<div class="cf-uploader-cont cf-uploader-zhuzhi <%=hasAddress?"cf-uploader-img":"" %>" id="addressProofUrl_container">
<input type="hidden" class="fileInput" name="addressProofUrl" value="${customer.addressProofUrl }" <%=customer.getNationtype()==10&&!substitute? "data-rule=\"required;\" data-msg-required=\"请上传住址证明\"" : ""%>/>
<a id="addressProofUrl_A" class="cf-zhuzhi">
<%if (hasAddress) { %>
<img src="${ctx}${customer.addressProofUrl}"/>
<div class="cf-uploader-tip-c" style="display: none;">
<%} else { %>
<img style="display: none;"/>
<div class="cf-uploader-tip-c">
<%} %>
<p class="cf-fontsize18">住址证明</p>
<p>点击上传住址证明</p>
</div>
</a>
<div class="cf-uploader-ts cf-color-red">
<span class="msg-box" style="position: static;" for="addressProofUrl"></span>
</div>
</div>
<div class="cf-position-top"><a target="_blank" href="${ctx}/help/askdetails.jsp?q=kfxg3">什么是住址证明?</a></div>
</div>
<%} %>

<div class="cf-btn-cont">
<input type="button" id="next" class="cf-btn cf-btn-blue" value="下一步" />
<a href="${ctx}/my/line/information.jsp" class="color-blue">返回修改资料</a>
</div>
</form>
</div>
</div>
<div class="cf-main-footer"></div>
</div>


<jsp:include page="/WEB-INF/portal/footer.jsp" />

</body>
</html>

0 1