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

最新推荐文章于 2024-05-16 03:05:46 发布

TCancel

最新推荐文章于 2024-05-16 03:05:46 发布

阅读量1.9w

点赞数

文章标签： jQuery 上传图片预览小图

本文链接：https://blog.csdn.net/u014362204/article/details/53080632

版权

<!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="" οnsubmit="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/*" οnchange="getzImg(this)" style="display:none" value="" id="img_z"/>
	<input type="file" accept="image/*" οnchange="getfImg(this)" value="" id="img_f" style="display:none"/>
	<div class="img_wp" οnclick="zhengmian()">
		<img src="up.png" id="zmz"/>
		<p class="img_intro">身份证正面照</p>
	</div>
	
	<div class="img_wp" οnclick="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>

TCancel

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
身份证照片正反面上传及预览缩略图

图片生成 * { 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; backgr
复制链接

扫一扫