<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.lm_manage .finance{padding: 20px;}
.lm_manage .t{text-indent: 2em;margin-bottom: 20px;}
.lm_manage .t.pass,.lm_manage .t.no_pass{text-indent: 0;text-align: center;margin-top: 20px;}
.lm_manage .t.passing{text-indent: 0;text-align: center;}
.lm_manage .t.pass:before{content: '\2713';color: green;margin-right: 5px;border: solid 1px green;border-radius: 50%;width: 18px;height: 18px;display: inline-block;text-align: center;line-height: 18px;}
.lm_manage .t.no_pass:before{content: '\2715';color: red;margin-right: 5px;border: solid 1px red;border-radius: 50%;width: 18px;height: 18px;display: inline-block;text-align: center;line-height: 18px;}
.lm_manage .radio_select{overflow: hidden;margin-top: 15px;}
.lm_manage .radio_select dd{float: left;width: 350px;text-indent: 2em;}
.lm_manage .radio_select dt{float: left;}
.lm_manage .radio_select dt input{margin-left: 20px;margin-right: 5px;position: relative;top: -1px;}
.lm_manage .btn{margin: 0 auto;display: block;margin-top: 40px;}
.lm_manage .id_card{display: inline-block;margin: 0 10px;margin-top: 20px;width: 220px;height: 135px;border: dashed 1px #D5D5D5;border-radius: 3px;overflow: hidden;cursor: pointer;text-align: center;position: relative;margin-bottom: 40px;}
.lm_manage .id_card dd{color: #aa5800;}
.lm_manage .id_card:hover dd{text-decoration: underline;}
.lm_manage .id_card dt{width: 110px;height: 67px;margin: 10px auto;margin-top: 20px;opacity: .6;}
.lm_manage .id_card .img{position: absolute;width: 200px;left: 10px;top: 10px;height: 115px;background: #fff;display: none;}
.lm_manage .id_card .img img{max-width: 100%;max-height: 100%;}
.upload_original .close{width: 21px;height: 21px;background: rgba(0,0,0,0.5);border-radius: 50%;position: absolute;right: 0px;top: 0px;z-index: 2;text-align: center;line-height: 20px;cursor: pointer;letter-spacing: 0;color: #fff;}
</style>
<script type="text/javascript" src="jquery.1.12.4.min.js"></script>
</head>
<body>
<div class="assets_content w753 right mv-bg-white">
<h1>照片认证</h1>
<p id="errorMsg" style="text-align: center;padding-top: 20px;font-size: 16px;display: none" class="red"></p>
<div class="pay_manage lm_manage" id="photoauth" style="">
<div class="finance" style="margin-top:0;text-align: center;">
<form id="photoidverify-form" method="post" action="/ajax/user/photoidverify/" enctype="multipart/form-data">
<div class="file_box">
<input type="file" class="file" name="photo[]" style="display: none;">
<input type="file" class="file" name="photo[]" style="display: none;">
<input type="file" class="file" name="photo[]" style="display: none;">
</div>
<div class="file_click">
<dl class="id_card upload_original upload_original_on">
<dt style="background: url(/jubi/images/id_card_z.png) no-repeat center center / 80px auto;"></dt>
<dd>上传正面</dd>
<dd class="img"><img></dd>
</dl>
<dl class="id_card upload_original">
<dt style="background: url(/jubi/images/id_card_f.png) no-repeat center center / 80px auto;"></dt>
<dd>上传背面</dd>
<dd class="img"><img></dd>
</dl>
<dl class="id_card upload_original">
<dt style="background: url(/jubi/images/id_card_s.png) no-repeat center center / auto 50px;"></dt>
<dd>上传手持身份证和当日字条</dd>
<dd class="img"><img></dd>
</dl>
</div>
<div class="pwtrade" style="padding-top: 50px;">
<dl>
<dd><input type="submit" value="确认提交" style=" font-size: 14px;width: 220px;height: 34px;background: #e55600;color: #fff;border: none;cursor: pointer;border-radius: 3px;margin-right: 20px;"></dd>
</dl>
</div>
</form>
<script>
function upload(obj,num){
var file = obj.files[0];
var photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
if(photoExt!='.jpg'&& photoExt!='.png'&& photoExt!='.jpeg'){
alert("请上传后缀名为jpg jpeg png的照片!");
sign=null;
return;
}
var fileSize = 0;
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
if (isIE && !obj.files) {
var filePath = obj.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
}else {
fileSize = obj.files[0].size;
}
fileSize=Math.round(fileSize/2048*100)/100; //单位为KB
if(fileSize<2048){
sign=1
}else{
alert("照片最大尺寸为2M,请重新上传!");
sign=null;
return;
}
if(num == 3){
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
$('.upload_original_on .close').detach();
if(num == 1){
$('.upload_original_on').before('<div class="upload_original"><p class="close">×</p><img src="'+this.result+'"/></div>');
}else{
$('.upload_original_on img').attr('src',this.result).before('<p self="1" class="close">×</p>');
$('.upload_original_on .img').show();
}
}
}
var lm = {
//上传图片,不裁切
upload_original:function () {
$(document).on('click','.upload_original .close',function (e) {
e.stopPropagation();
var _index2 = $(this).parents('.id_card').index();
$('.file_box input').eq(_index2).val('');
$(this).parents('.id_card').find('.img').hide();
})
var num = 0;
var input = $(".file");
var original =$(".upload_original");
if (typeof (FileReader) === 'undefined') {
result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!";
input.attr('disabled', 'disabled');
} else {
$(document).on('change','.file',function () {
upload(this,num);
})
$(document).on('click','.upload_original',function () {
var _index = $(this).index();
if($(this).attr('before') == 1){
num = 1;
}else{
num = 0;
}
$('.upload_original').removeClass('upload_original_on');
$(this).addClass('upload_original_on');
$('.file_box input').eq(_index).click();
})
}
}
}
</script>
<script>
$(function () {
//图片/原图
lm.upload_original();
})
</script>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.lm_manage .finance{padding: 20px;}
.lm_manage .t{text-indent: 2em;margin-bottom: 20px;}
.lm_manage .t.pass,.lm_manage .t.no_pass{text-indent: 0;text-align: center;margin-top: 20px;}
.lm_manage .t.passing{text-indent: 0;text-align: center;}
.lm_manage .t.pass:before{content: '\2713';color: green;margin-right: 5px;border: solid 1px green;border-radius: 50%;width: 18px;height: 18px;display: inline-block;text-align: center;line-height: 18px;}
.lm_manage .t.no_pass:before{content: '\2715';color: red;margin-right: 5px;border: solid 1px red;border-radius: 50%;width: 18px;height: 18px;display: inline-block;text-align: center;line-height: 18px;}
.lm_manage .radio_select{overflow: hidden;margin-top: 15px;}
.lm_manage .radio_select dd{float: left;width: 350px;text-indent: 2em;}
.lm_manage .radio_select dt{float: left;}
.lm_manage .radio_select dt input{margin-left: 20px;margin-right: 5px;position: relative;top: -1px;}
.lm_manage .btn{margin: 0 auto;display: block;margin-top: 40px;}
.lm_manage .id_card{display: inline-block;margin: 0 10px;margin-top: 20px;width: 220px;height: 135px;border: dashed 1px #D5D5D5;border-radius: 3px;overflow: hidden;cursor: pointer;text-align: center;position: relative;margin-bottom: 40px;}
.lm_manage .id_card dd{color: #aa5800;}
.lm_manage .id_card:hover dd{text-decoration: underline;}
.lm_manage .id_card dt{width: 110px;height: 67px;margin: 10px auto;margin-top: 20px;opacity: .6;}
.lm_manage .id_card .img{position: absolute;width: 200px;left: 10px;top: 10px;height: 115px;background: #fff;display: none;}
.lm_manage .id_card .img img{max-width: 100%;max-height: 100%;}
.upload_original .close{width: 21px;height: 21px;background: rgba(0,0,0,0.5);border-radius: 50%;position: absolute;right: 0px;top: 0px;z-index: 2;text-align: center;line-height: 20px;cursor: pointer;letter-spacing: 0;color: #fff;}
</style>
<script type="text/javascript" src="jquery.1.12.4.min.js"></script>
</head>
<body>
<div class="assets_content w753 right mv-bg-white">
<h1>照片认证</h1>
<p id="errorMsg" style="text-align: center;padding-top: 20px;font-size: 16px;display: none" class="red"></p>
<div class="pay_manage lm_manage" id="photoauth" style="">
<div class="finance" style="margin-top:0;text-align: center;">
<form id="photoidverify-form" method="post" action="/ajax/user/photoidverify/" enctype="multipart/form-data">
<div class="file_box">
<input type="file" class="file" name="photo[]" style="display: none;">
<input type="file" class="file" name="photo[]" style="display: none;">
<input type="file" class="file" name="photo[]" style="display: none;">
</div>
<div class="file_click">
<dl class="id_card upload_original upload_original_on">
<dt style="background: url(/jubi/images/id_card_z.png) no-repeat center center / 80px auto;"></dt>
<dd>上传正面</dd>
<dd class="img"><img></dd>
</dl>
<dl class="id_card upload_original">
<dt style="background: url(/jubi/images/id_card_f.png) no-repeat center center / 80px auto;"></dt>
<dd>上传背面</dd>
<dd class="img"><img></dd>
</dl>
<dl class="id_card upload_original">
<dt style="background: url(/jubi/images/id_card_s.png) no-repeat center center / auto 50px;"></dt>
<dd>上传手持身份证和当日字条</dd>
<dd class="img"><img></dd>
</dl>
</div>
<div class="pwtrade" style="padding-top: 50px;">
<dl>
<dd><input type="submit" value="确认提交" style=" font-size: 14px;width: 220px;height: 34px;background: #e55600;color: #fff;border: none;cursor: pointer;border-radius: 3px;margin-right: 20px;"></dd>
</dl>
</div>
</form>
<script>
function upload(obj,num){
var file = obj.files[0];
var photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
if(photoExt!='.jpg'&& photoExt!='.png'&& photoExt!='.jpeg'){
alert("请上传后缀名为jpg jpeg png的照片!");
sign=null;
return;
}
var fileSize = 0;
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
if (isIE && !obj.files) {
var filePath = obj.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
}else {
fileSize = obj.files[0].size;
}
fileSize=Math.round(fileSize/2048*100)/100; //单位为KB
if(fileSize<2048){
sign=1
}else{
alert("照片最大尺寸为2M,请重新上传!");
sign=null;
return;
}
if(num == 3){
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
$('.upload_original_on .close').detach();
if(num == 1){
$('.upload_original_on').before('<div class="upload_original"><p class="close">×</p><img src="'+this.result+'"/></div>');
}else{
$('.upload_original_on img').attr('src',this.result).before('<p self="1" class="close">×</p>');
$('.upload_original_on .img').show();
}
}
}
var lm = {
//上传图片,不裁切
upload_original:function () {
$(document).on('click','.upload_original .close',function (e) {
e.stopPropagation();
var _index2 = $(this).parents('.id_card').index();
$('.file_box input').eq(_index2).val('');
$(this).parents('.id_card').find('.img').hide();
})
var num = 0;
var input = $(".file");
var original =$(".upload_original");
if (typeof (FileReader) === 'undefined') {
result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!";
input.attr('disabled', 'disabled');
} else {
$(document).on('change','.file',function () {
upload(this,num);
})
$(document).on('click','.upload_original',function () {
var _index = $(this).index();
if($(this).attr('before') == 1){
num = 1;
}else{
num = 0;
}
$('.upload_original').removeClass('upload_original_on');
$(this).addClass('upload_original_on');
$('.file_box input').eq(_index).click();
})
}
}
}
</script>
<script>
$(function () {
//图片/原图
lm.upload_original();
})
</script>
</div>
</div>
</div>
</body>
</html>