main-site
/
mooctest-user


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>慕测平台</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <link rel="stylesheet" type="text/css" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/fonts/font-awesome-4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/fonts/iconic/css/material-design-iconic-font.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/util.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
</head>

<body>

<div class="limiter">
    <div class="container-login100" th:style="'background-image:url(/images/bg.jpg);'">
        <div class="wrap-login100 p-l-40 p-r-40 p-t-30 p-b-25" style="width: 800px">
            <form th:action="@{/api/bankInfo}" enctype="multipart/form-data" method="post" class="login100-form validate-form" style="align-content: center; padding-left: 40px; padding-right: 40px;">

                <div id="login-logo" class="p-b-15" style="text-align: center;">
                    <img style="width: 80px;" th:src="@{/images/mooctest.png}" >
                </div>
                <div class="wrap-input100 validate-input m-b-25">
                    <span class="label-input100" style="font-size: medium; font-weight: bold">姓名:</span>
                    <input id="real_name" name="real_name" type="text" placeholder="请填写真实姓名" required="不可为空">
                </div>
                <div class="wrap-input100 validate-input m-b-25">
                    <span class="label-input100" style="font-size: medium; font-weight: bold">身份证号码:</span>
                    <input id="id_number" name="id_number" type="text" maxlength="18" minlength="18" placeholder="请输入18位身份证号" required="不可为空">
                </div>
                <div class="wrap-input100 validate-input m-b-25">
                    <span class="label-input100" style="font-size: medium; font-weight: bold">银行卡号:</span>
                    <input id="bank_card_number" name="bank_card_number" type="text" placeholder="请填写银行卡号" required="不可为空">
                </div>
                <div class="wrap-input100 validate-input m-b-25">
                    <span class="label-input100" style="font-size: medium; font-weight: bold">开户行信息:</span>
                    <input id="bank_info" name="bank_info" type="text" placeholder="具体到支行" required="不可为空">
                </div>
                <div class="wrap-input100 validate-input m-b-25">
                    <span class="label-input100" style="font-size: medium; font-weight: bold">身份证正面:</span>
                    <div class="m-t-5" style="position: relative;">
                        <input id="ID_card_front" style="position: absolute;opacity: 0;" name="ID_card_front" type="file" accept="image/png" onchange="changeFrontPic()" required="不可为空">
                        <label for="ID_card_front">
                            <img id="frontImg" src="/images/front_sample.jpg" style="width: 214px; height: 135px">
                        </label>
                    </div>
                </div>
                <div class="wrap-input100 validate-input m-b-25">
                    <span class="label-input100" style="font-size: medium; font-weight: bold">身份证反面:</span>
                    <div class="m-t-5" style="position: relative;">
                        <input id="ID_card_back" style="position: absolute;opacity: 0;" name="ID_card_back" type="file" accept="image/png" onchange="changeBackPic()" required="不可为空">
                        <label for="ID_card_back">
                            <img id="backImg" src="/images/back_sample.jpg" style="width: 214px; height: 135px">
                        </label>
                    </div>
                </div>
                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button class="login100-form-btn">确 认 上 传</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/vendor/jquery/jquery-3.2.1.min.js}"></script>
<script th:src="@{/js/main.js}"></script>
<script type="text/javascript">
    function changeBackPic(){
        var reads = new FileReader();
        var f = document.getElementById("ID_card_back").files[0];
        reads.readAsDataURL(f);
        reads.onload=function(e){
            document.getElementById("backImg").src=this.result;
        }
    }
    function changeFrontPic(){
        var reads = new FileReader();
        var f = document.getElementById("ID_card_front").files[0];
        reads.readAsDataURL(f);
        reads.onload=function(e){
            document.getElementById("frontImg").src=this.result;
        }
    }
</script>
</body>

</html>