经验分享程序开发文档资料数据资源其它资源

HTML5手机身份证上传表单提交代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5手机身份证上传表单提交代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

HTML5手机身份证上传表单提交代码

HTML代码(index.html):

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>HTML5手机身份证上传表单提交代码</title>
<link href="css/publi.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- ====================================loading -->
<section id="loading"></section>
<!-- ====================================页面开始 -->
<!--登录-->
<header class="acc_head">
	<div class="clearfix">
		<h1 class="tc">账户迁移申请</h1>
		<a href="#" class="out_icon">退出</a>
	</div>
</header>
<section class="acc_apply">
	<ul>
		<li class="clearfix">
			<label class="tl">迁移到手机号：</label>
			<input autocomplete="off" placeholder="请输入迁移到的手机号码" class="" type="text" />
		</li>
		<li class="clearfix">
			<label class="tl acc_five">身份证姓名：</label>
			<input autocomplete="off" placeholder="请输入姓名" class="" type="text" />
		</li>
		<li class="clearfix">
			<label class="tl acc_five">身份证号码：</label>
			<input autocomplete="off" placeholder="请输入身份证号码" class="" type="text" />
		</li>
		<li class="clearfix" >
			<label class="tl acc_four fl">证件照片：</label>
		</li>
		<li style="border-top: 0; margin-bottom: 60px;">
			<div class="acc_img">
				<p class="tc">参考样例</p>
				<div id="sss">
					<img class="acc_imgin" src="img/acc_img.png" id="img0">
				</div>
				<div class="acc_sc">
					<a href="javascript:;" class="tc acc_scicon">选择图片</a>
					<input type="file" name="file0" id="file0" multiple class="ph08" />

				</div>
				<p class="ph09 ">注：身份证上的所有信息清晰可见，必须能看清证件号。照片需免冠，建议未化妆。手持证件人的五官清晰可见。照片内容真实有效。不得做任何修改。支持jpg、jpeg、bmp、gif格式照片。大小不超过5M</p>
			</div>
		</li>
	</ul>
</section>
<footer class="acc_foot clearfix">
	<a href="#" class="fl tc acc_cancel">取消</a>
	<a href="#" class="fl tc acc_sure">提交</a>
</footer>
<!--弹出层-->
<article id="tip">
	<div class="pack">
		<h1 class="tc">提交成功</h1>
		<p class="tc"></p>
		<a href="#">确定</a>
	</div>
</article>
<!-- 网站要用到的一些类库 -->
<script src="js/jquery1.8.3.min.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">

	$(function() {
		/*document.documentElement.style.fontSize=document.documentElement.clientWidth*12/320+'px';*/
		$(window).on("load", function() {
				$("#loading").fadeOut();
			})
			// ========================================浮层控制
		$("#tip .pack a").on("click", function() {
			$("#tip").fadeOut()
			$("#tip .pack p").html("")
			return false;
		})

		function alerths(str) {
			$("#tip").fadeIn()
			$("#tip .pack p").html(str)
			return false;
		}
		$(".acc_sure").on("click", function() {
			alerths("请等待审核！")
			return false;
		})
		$("#file0").change(function() {
			if (this.files && this.files[0]) {
				var objUrl = getObjectURL(this.files[0]);
				console.log("objUrl = " + objUrl);
				if (objUrl) {
					$("#img0").attr("src", objUrl);
					$("#file0").click(function(e) {
						$("#img0").attr("src", objUrl);
					});
				} else {
					//IE下，使用滤镜
					this.select();
					var imgSrc = document.selection.createRange().text;
					var localImagId = document.getElementById("sss");
					//图片异常的捕捉，防止用户修改后缀来伪造图片
					try {
						preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
					} catch (e) {
						this._error("filter error");
						return;
					}
					this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
				}
			}
		});
		//建立一個可存取到該file的url
		function getObjectURL(file) {
			var url = null;
			if (window.createObjectURL != undefined) { // basic
				url = window.createObjectURL(file);
			} else if (window.URL != undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file);
			} else if (window.webkitURL != undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file);
			}
			return url;
		}
	})
</script>
</body>
</html>

JS代码(script.js):

$(function(){
	// =================================loading鎺у埗 $(window).on("load",function(){
	$("#loading").delay(50).fadeOut()}
);
}
)

CSS代码(publi.css):

@charset "utf-8";/*鍒濆鍖? reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:14px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}
body,html{margin:0 auto;padding:0;font-family:"瀹嬩綋",\5FAE\8F6F\96C5\9ED1,Arial,Helvetica,sans-serif;font-size:14px;min-width:320px;overflow-y:auto;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;max-width:640px;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%}
address,cite,dfn,em,var,i{font-style:normal}
code,kbd,pre,samp{font-family:courier new,courier,monospace}
small{font-size:12px}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
legend{color:#000}
ol,ul{list-style:none}
a{text-decoration:none;color:#553411;}
a:hover,a:focus{text-decoration:none;}
fieldset,img{border:0;vertical-align:top;}
textarea{resize:none;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
a,button{cursor:pointer;}
/*娓呮娴姩*/
.decimal{font-family:HelveticaNeueLt,'Microsoft YaHei',SimHei;font-size:14px;}
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
/*瑙ｅ喅鐩掑瓙濉岄櫡闂*/
.clearfix{display:inline-table;}
*html .clearfix{height:1%;}
.clearfix{display:block;}
*+html .clearfix{min-height:1%;}
/*鍏叡鏍峰紡*/
.tc{text-align:center!important;}
.tl{text-align:left!important;}
.tr{text-align:right!important;}
.fl{float:left!important;}
.fr{float:right!important;}
.rlast{margin-right:0!important;}
.ffirst{margin-left:0!important;}

CSS代码(style.css):

@charset "utf-8";/*绛夊緟鏉?/#loading{width:100%;height:100%;background:url(../img/wsload.gif) no-repeat center center #FFF;background-size:10%;position:fixed;top:0;left:0;z-index:999;}
/*==============================================================娴眰鍐呭*/
#tip{background:rgba(0,0,0,0.3);position:fixed;top:0;left:0;width:100%;height:100%;display:none;z-index:9999;}
#tip .pack{width:80%;min-height:100px;margin:0 auto;background:#FFF;margin-top:30%;position:relative;overflow:hidden;padding-bottom:60px;}
#tip .pack img{margin:70px auto 20px;display:block;}
#tip .pack h1{font-size:14px;text-align:center;color:#666666;line-height:36px;margin-top:20px;}
#tip .pack a{display:block;width:100%;position:absolute;bottom:0px;font-size:16px;color:#c8161d;height:40px;line-height:40px;text-align:center;border-top:1px solid #d6d6d6;}
/*鐧诲綍鐣岄潰*/
.acc_login ul li h2{font-size:18px;height:36px;line-height:36px;}
.acc_login ul li .acc_input{width:100%;display:block;height:36px;line-height:36px;border:0;border-top:1px solid #d6d6d6;}
.acc_login ul li .login_icon{display:block;height:36px;line-height:36px;background-color:#f8f8f8;color:#d6d6d6;}
.acc_login ul li .login_iconon{color:#fff;background-color:#c8161d;}
/*璐︽埛杩佺Щ鐢宠*/
.acc_head div{position:relative;}
.acc_head div .out_icon{position:absolute;right:10px;top:10px;}
.acc_head div h1{line-height:40px;font-size:20px;}
.acc_apply ul li{width:100%;display:block;/*height:36px;*/
line-height:36px;border-top:1px solid #d6d6d6;}
.acc_apply ul li input{border:0;}
.acc_apply ul li label{margin-left:10px;color:#323232;}
.acc_apply ul li .acc_five{margin-right:14px;}
.acc_apply ul li .acc_four{margin-right:28px;}
/*涓婁紶鐓х墖*/
.acc_apply ul li .acc_img{width:80%;margin:0 auto;/*margin-bottom:60px;*/
}
.acc_apply ul li .acc_imgin{width:100%;}
.acc_sc{position:relative;height:36px;margin:10px 0;}
.acc_sc .ph08{opacity:0;z-index:10;position:absolute;top:0;left:0;height:36px;width:100%;}
.acc_sc .acc_scicon{display:block;color:#b2b2b2;background-color:#f7f7f7;}
.acc_img p{color:#b2b2b2;}
.acc_img .ph09{font-size:10px!important;line-height:18px;}
.acc_foot{width:100%;height:36px;position:fixed;bottom:0;line-height:36px;}
.acc_foot a{width:50%;display:block;}
.acc_foot .acc_cancel{color:#b2b2b2;background-color:#f7f7f7;}
.acc_foot .acc_sure{color:#fff;background-color:#c8161d;}
/*鑻变鸡*/
.yingLun ul li{margin-top:-1px;}
.yingLun ul li img{width:100%;}
.yingLun ul .yl_txt{background:url(../img/yl2_06.jpg) no-repeat center top;background-size:cover;padding:10px 30px 50px 30px;}
.yingLun ul .yl_txt h2 img{width:292px;}
.yingLun ul .yl_txt ul li{padding-left:30px;background:url(../img/ly_02.png) no-repeat left center;margin-top:10px;font-size:23px;}
.yingLun ul .yl_txt ul .active{background:url(../img/ly_02_1.png) no-repeat left center;}
.yingLun ul .yl_txt ul li span{background-color:rgba(0,0,0,0.3);color:#fff;padding:0 7px;border-radius:50px;display:block;}
.yingLun ul .yl_txt .ly_xx{margin:0 auto;width:553px;margin-top:20px;}
.yingLun ul .yl_txt .ly_xx .ly_ph{background:url(../img/ly_04.png) no-repeat left center;background-size:100%;width:345px;height:57px;line-height:57px;border:0;padding-left:10px;font-size:24px;}
.yingLun ul .yl_txt .ly_xx .btn_lq img{width:152px;display:inline-block;height:57px;}
/*寮瑰嚭妗嗗鍔?/#tip .pack_yl{min-height:200px;margin-top:45%;}
#tip .pack_yl h1{font-size:24px;margin-bottom:30px;}
#tip .pack_yl p{font-size:24px;padding:10px;padding-bottom:80px;}
#tip .pack_yl a{display:block;width:100%;position:absolute;bottom:0px;font-size:24px;color:#c8161d;height:80px;line-height:80px;text-align:center;border-top:1px solid #d6d6d6;}
.header{width:100%;height:60px;border-bottom:1px solid #b3b3b3;text-align:left;cursor:pointer;position:relative;background-color:#FFF;}
/*鏂板*/
.acc_login ul li .acc_input{border-bottom:1px solid #d6d6d6;}
.axc_yzm .axc_yzm01{border:0;border-right:1px solid #d6d6d6;height:36px;line-height:36px;padding-left:5%;display:block;width:60%;}
.axc_yzm .axc_yzm02{border:0;height:36px;line-height:36px;display:block;width:34%;text-align:center;background-color:#fff;color:#c8161d;}
.acc_login ul li .login_iconon01{background-color:#d6d6d6;color:#323232;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
181.67 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
181.67 KB
立即下载
高慧彩
了解
打赏作者 鼓励作者
Html 表单代码2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章