身份证扫描插件工具

最新推荐文章于 2024-07-16 20:05:07 发布

oFengFengFeng

最新推荐文章于 2024-07-16 20:05:07 发布

阅读量4.9k

点赞数

本文链接：https://blog.csdn.net/oFengFengFeng/article/details/51852813

版权

最近，笔者正在开发一个需要调用身份证扫描的web应用，以下是调用方式总结

1.页面构成

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
	<title>奶牛线路首页</title>
	
	
	<#--
	<link href="/css/dialog/dialog.css" rel="stylesheet" type="text/css" />
	-->

	<script>
	var mediaId=${memberId};
	</script>
</head>

<body>
<#--
<a href="javascript:void(0);" class="li-btn blue li-btn-a_ip" id="idcard">获取</a>
<a href="javascript:void(0);" class="li-btn blue li-btn-a_ip" οnclick="IP_onclick()">获取</a>
<a href="javascript:void(0);" class="li-btn blue li-btn-a_ip" οnclick="DevOpen_ID()">获取</a>
<a href="javascript:void(0);" class="li-btn blue li-btn-a_ip" οnclick="DevOpen_ID()">获取</a>
-->
<OBJECT classid="clsid:68DBF029-7F1B-4178-9C51-CA1FE5767D03" width="0" height="0" align="center" codebase="mtx_32.cab#version=1,0,0,1" id="mtx_32Ctrl"  name="mtx_32Ctrl" HSPACE="0" VSPACE="0"></OBJECT>
<input type="hidden" name="PwdM1" id="PwdM1" maxlength="12" size="20" value="FFFFFFFFFFFF"> 
<input type="hidden" name="BlockM1" id="BlockM1" maxlength="130" size="5" value="10"> 
<input type="hidden" name="DeviceHandle" id="DeviceHandle" maxlength="100" size="5" value="-1"> 
<#include "/common/vinux_percent.ftl">	
<#--
<a href="javascript:void(0);" οnclick="showLogin()">弹出登陆</a>
-->

<#include "/cowvacation/cow.ftl" encoding="UTF-8"/>
<#--
<#include "/common/dialog.ftl" encoding="UTF-8"/>
-->

</body>
	<script src="/js/bootstrap.3.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="/js/bootstrap.3.3.2/bootstrap.js" type="text/javascript"></script>
	<link href="/js/bootstrap.3.3.2/bootstrap.min.css" rel="stylesheet" type="text/css" />
	
	<script src="/js/cow/search.js" type="text/javascript"></script>
	<script src="/js/cowvacation/cowindex.js" type="text/javascript"></script>
	<script src="/js/cow/function.js" type="text/javascript"></script>
	<link href="/css/cow/base.css" rel="stylesheet" type="text/css" />
	
	<script src="/js/NewIDCard.js" type="text/javascript"></script>
	<script src="/js/CVR_IDCard.js" type="text/javascript"></script>
	
	<!--软键盘-->
	<link href="/js/keyboard/jquery-ui.css" rel="stylesheet">
	<link href="/js/keyboard/keyboard.css" rel="stylesheet">
	<script src="/js/keyboard/jquery-ui.min.js"></script>
	<script src="/js/keyboard/jquery.keyboard.js"></script>
	<script src="/js/keyboard/jquery.mousewheel.js"></script> 
</html>

2.插件文件

/**
 * 这是一个用于调用身份证扫描的插件工具
 * 作者：fffjia
 */
$.fn.CVR_IDCard = function(options) {
	var defaults = {
		IDCard_Name:"",
		IDCard_CardNo:"",
		readSuccess : function(IDCard_Name,IDCard_CardNo) {
		},
		readFail : function() {
		}
	};
	var settings = $.extend(defaults, options);
	var clickHandle = function() {
		var st = mtx_32Ctrl.DeviceOpen(0,115200);//打开设备
		if((st == 0 || st < 0) && mtx_32Ctrl.lErrorCode != 0)
		{
			showAlert("读取失败,错误码st:"+st);	
			mtx_32Ctrl.DeviceClose(DeviceHandle.value);
			DeviceHandle.value = "-1";
			readFail();
		}else {
			DeviceHandle.value = st;

			var ret = mtx_32Ctrl.IDCardGetCardInfo(DeviceHandle.value,'');
		    if(mtx_32Ctrl.lErrorCode == 0)
		    {
		    	readSuccess(mtx_32Ctrl);
		    }else{
				if(mtx_32Ctrl.lErrorCode==-50){//未放身份证
					showAlert("请重新放身份证后读取");
				}else{
			    	showAlert("mtx_32Ctrl.lErrorCode:"+mtx_32Ctrl.lErrorCode);
			    }
		    }
		    mtx_32Ctrl.DeviceClose(DeviceHandle.value);
		}
	};
	var readSuccess = function(mtx_32Ctrl) {
		settings.IDCard_Name=mtx_32Ctrl.idname;
		settings.IDCard_CardNo=mtx_32Ctrl.resultid;
		settings.readSuccess.apply($(this),[settings.IDCard_Name,settings.IDCard_CardNo]);
	};
	var readFail = function() {
		settings.readFail.apply($(this));
	};	
	return $(this).each(function() {
		$(this).click(clickHandle);
	});

};

/**
 * demo：调用插件的demo
 * 
 */
$(function() {
	$('#idcard').CVR_IDCard({
		readSuccess : function(IDCard_Name,IDCard_CardNo) {//读取成功的处理
			alert("alert(IDCard_Name)"+IDCard_Name);
			alert("alert(IDCard_CardNo)"+IDCard_CardNo);
		},
		readFail : function() {//读取失败的处理
			alert("读取身份证失败，请把身份证离开读卡区5秒钟，重新读取");
		}
	});
});


/**
 * 用于扩展错误提示
 * @param msg
 */
function showAlert(msg){
	alert(msg);
}

3.调用方式

/**
 * 为刷身份证绑定事件
 */
function freshIdCardButton(){
	$(".pre-btn3").each(function(){
		$(this).CVR_IDCard({
			readSuccess : function(IDCard_Name,IDCard_CardNo) {//读取成功的处理
				addPerson($(event.srcElement), IDCard_Name, IDCard_CardNo);
			},
			readFail : function() {//读取失败的处理
				alert("读取身份证失败，请把身份证离开读卡区5秒钟，重新读取");
			}
		});
	});
}

function addPerson($target,IDCard_Name,IDCard_CardNo) {
	
	$target.parent().append(
		'<p class="wax100 fl m10top">'+
			'<label class="name m10right">'+
				'<em class="m20right">姓名：'+IDCard_Name+'</em>'+
				'<em>身份证号码：'+IDCard_CardNo+'</em>'+
			'</label>'+
			'<a href="javascript:void(0);" class="delectBtn fl" οnclick="removePerson()">删除</a>'+
		'</p>'
	);
}