<!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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<br><br>不支持IE8及以下浏览器。</p><br>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
HTML5手机身份证上传表单代码.zip
版权申诉
195 浏览量
2023-09-27
22:12:00
上传
评论
收藏 183KB ZIP 举报
HTML5手机身份证上传表单代码.zip （7个子文件） 
js 
jquery1.8.3.min.js 91KB script.js 161B img 
wsload.gif 532B
acc_img.png 144KB css style.css 5KB publi.css 2KB
index.html 5KB资源评论
