作者 anyv
1 个管道 的构建 通过 耗费 0 秒

14

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>学考无忧-个人信息</title>
<link rel="stylesheet" href="__TMPL__/public/assets/css/reset.css" />
<link rel="stylesheet" href="__TMPL__/public/assets/css/log.css" />
</head>
<body>
<div class="log_top_second">
<!-- 顶部 -->
<div class="ad_top" style="background-color:white;">
<img class="ad_topImg" src="__TMPL__/public/assets/images/left.png" alt="" />
<h1>个人信息</h1>
<p style="color:#FF7700;">保存</p>
</div>
</div>
<div class="log_two_input">
<div class="log_two_input_one">
<div class="log_two_input_title">
姓名
</div>
<div class="log_two_input_contant">
<input type="text" placeholder="请输入姓名" />
</div>
</div>
<div class="log_two_input_one">
<div class="log_two_input_title">
手机号
</div>
<div class="log_two_input_contant">
<input style="width:3rem" type="text" placeholder="请输入手机号" maxlength="11" />
</div>
<div class="log_two_input_btn">
获取验证码
</div>
</div>
<div class="log_two_input_one">
<div class="log_two_input_title">
输入验证码
</div>
<div class="log_two_input_contant">
<input type="text" placeholder="请输入验证码" />
</div>
</div>
<div class="log_two_input_one">
<div class="log_two_input_title">
身份证号
</div>
<div class="log_two_input_contant">
<input type="text" placeholder="请输入身份证号" />
</div>
</div>
</div>
<div class="log_two_picture">
<div class="log_two_picture_title">
上传证件照
</div>
<div class="log_two_picture_img">
<div class="log_two_pi_one">
<div class="log_two_pi_one_icon">
<img src="__TMPL__/public/assets/images/jiahao.png" id="img0" alt="" />
</div>
<div class="log_two_pi_one_p">
正面
</div>
<div class="input_file">
<input type="file" onchange="addImg(this)" />
</div>
</div>
<div class="log_two_pi_one log_two_pi_two">
<div class="log_two_pi_one_icon">
<img src="__TMPL__/public/assets/images/jiahao.png" id="img1" alt="" />
</div>
<div class="log_two_pi_one_p">
反面
</div>
<div class="input_file">
<input type="file" onchange="addImgOne(this)" />
</div>
</div>
</div>
<div class="log_two_picture_state">
<div class="log_two_ps_one">
拍照示范
</div>
<div class="log_two_ps_two">
<img src="__TMPL__/public/assets/images/88.png" alt="" class="img1" />
<img src="__TMPL__/public/assets/images/89.png" alt="" class="img2" />
</div>
<div class="log_two_ps_three">
请稳定拍摄,保证照片中的<span>证件完整</span>,字体清晰,亮度均匀,可以高通过率
</div>
</div>
</div>
<!-- 保存 -->
<div class="log_two_bottom_btn">
<a href="log_first.html">保存</a>
</div>
<script src="__TMPL__/public/assets/js/jquery.js"></script>
<script src="__TMPL__/public/assets/js/base.js"></script>
<script>
// 上传图片
function addImg(file) {
console.log(file.files);
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {
$("#img0").attr("src", evt.target.result);
$(".log_two_pi_one").addClass("log_two_pi_ones");
$(".log_two_pi_one_p").addClass("log_two_pi_one_ps");
$(".log_two_pi_one_icon").addClass("log_two_pi_one_icons");
};
reader.readAsDataURL(file.files[0]);
} else {
// $("#preview").html('<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
}
}
function addImgOne(file) {
console.log(file.files);
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {
$("#img1").attr("src", evt.target.result);
$(".log_two_pi_one").addClass("log_two_pi_ones");
$(".log_two_pi_one_p").addClass("log_two_pi_one_ps");
$(".log_two_pi_one_icon").addClass("log_two_pi_one_icons");
};
reader.readAsDataURL(file.files[0]);
} else {
// $("#preview").html('<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
}
}
</script>
</body>
</html>
\ No newline at end of file
... ...