身份证照片正反面上传及预览缩略图

来源：互联网发布：网络剧《有毒》在线播编辑：程序博客网时间：2024/04/29 02:06
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">  <meta name="apple-mobile-web-app-capable" content="yes">  <meta name="apple-mobile-web-app-status-bar-style" content="black">  <meta name="format-detection" content="telephone=no">   <title>图片生成</title>  <style>   * {margin: 0;padding: 0;box-sizing: border-box;list-style: none;}body {font-size: 12px;font-family: Arial, Verdana;color: #fff;font-weight: 100;cursor: default;background:#FFFFFF;min-width:320px;}textarea,select,input[type="text"],input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:0;background: none;}.head1{width:100%;height:50px;line-height:50px;color:#323232;background:#F7F7F7;text-align:center;font-family:"微软雅黑";border-bottom:5px solid #EFEFEF;}.cancel{width:50px;height:50px;color:#989898;position:absolute;}.save_btn{margin:20px auto;border:none;height:40px;width:95%;background:#ce1b1b!important;border-radius:3px!important;font-family:"微软雅黑";font-size:16px;color:white;line-height:40px;}.info_list{width:100%;height:50px;border-bottom:1px solid #F2F2F2;}.list_left{width:27%;margin-left:3%;height:50px;font-family:"微软雅黑";font-size:16px;color:#636363;line-height:50px;float:left;}.list_left2{width:97%;margin-left:3%;height:50px;font-family:"微软雅黑";font-size:16px;color:#636363;line-height:50px;float:left;}.list_left2 span{color:#A04E52;font-size:12px;margin-left:5px;}.list_right{width:65%;margin-right:3%;height:50px;color:#636363;line-height:50px;float:right;}.edit{width:100%;height:50px;color:#898989;font-family:"微软雅黑";font-size:16px;border:none;}.id_img_wp{width:94%;margin:0 auto;min-height:30px;}.img_wp{width:40%;margin:0 5% 0 5%;float:left;cursor:pointer;}.img_wp img{width:100%;height:100%;}.img_intro{color:#383838;text-align:center;font-family:"微软雅黑";padding:10px 0 10px 0;}.cf{clear:both;}  </style> <script src="http://zmxy.keziw.com/js/jquery-1.11.3.js"></script> </head> <body><div class="head1"><div class="cancel">〈</div>  购直销权  </div>  <form action="" onsubmit="return checkForm()"> <div class="info_list"><div class="list_left">直播店名</div><div class="list_right"><input type="text" class="edit" id="live_name"/></div> </div>  <div class="info_list"><div class="list_left">店主</div><div class="list_right"><input type="text" class="edit" id="user_name"/></div> </div>  <div class="info_list"><div class="list_left">身份证号码</div><div class="list_right"><input type="text" class="edit" id="card_no"/></div> </div>  <div class="info_list"><div class="list_left">电话号码</div><div class="list_right"><input type="text" class="edit" id="call_no"/></div> </div>  <div class="info_list" style="border-bottom:none;"><div class="list_left2">身份证上传<span>(请上传身份证正反面，图片保持清晰)</span></div> </div> <div class="id_img_wp"><input type="file" accept="image/*" onchange="getzImg(this)" style="display:none" value="" id="img_z"/><input type="file" accept="image/*" onchange="getfImg(this)" value="" id="img_f" style="display:none"/><div class="img_wp" onclick="zhengmian()"><img src="up.png" id="zmz"/><p class="img_intro">身份证正面照</p></div><div class="img_wp" onclick="fanmian()"><img src="up.png" id="fmz"/><p class="img_intro">身份证反面照</p></div><div class="cf"></div> </div>  <div class="info_list"><div class="list_left">店铺类别</div><div class="list_right"><select class="edit"><option>滋补养神</option></select></div> </div> <div class="info_list"><div class="list_left">主营商品</div><div class="list_right"><input type="text" class="edit" id="sells"/></div> </div>  <p style="text-align:center;">  <input type="submit" value="确认申请" class="save_btn"/>  </p>  </form>     <script>  $(function(){  $('.img_wp img').height($('.img_wp img').width()*0.6);   $(window).resize(function(){  $('.img_wp img').height($('.img_wp img').width()*0.6);  })  })//正面function zhengmian(){$('#img_z').click();}function getzImg(imgFile){    var file = imgFile.files[0];    var reader = new FileReader();    reader.readAsDataURL(file);//将文件读取为Data URL小文件   这里的小文件通常是指图像与 html 等格式的文件    reader.onload = function(e){$("#zmz").attr("src",e.target.result);    }}//反面function fanmian(){$('#img_f').click();}function getfImg(imgFile){    var file = imgFile.files[0];    var reader = new FileReader();    reader.readAsDataURL(file);    reader.onload = function(e){$("#fmz").attr("src",e.target.result);    }}//申请function checkForm(){if($('#live_name').val().length<1){$('#live_name').focus();alert('请输入直播店名');return false;}if($('#user_name').val().length<1){$('#user_name').focus();alert('请输入店主名');return false;} var cardNo=$('#card_no');if(cardNo.val() &&  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(cardNo.val())){}else{cardNo.focus();alert('身份证号码格式不正确！');return false;}var call_no = $('#call_no');if(call_no.val() && /^1[3|4|5|7|8]\d{9}$/.test(call_no.val())){} else{call_no.focus();alert('手机号码格式不正确！');return false;}if($('#img_z').val()==null||$('#img_z').val()==''){    alert('请上传身份证正面照！');    return false;    }if($('#img_f').val()==null||$('#img_f').val()==''){    alert('请上传身份证反面照！');    return false;    }if($('#sells').val().length<1){$('#sells').focus();alert('请输入主营商品！');return false;}//提交表单}  </script> </body></html>
0 0