上传身份证照片js_Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息...
客户要求用身份证图片上传获取身份证的详细信息就下来研究了一下(现在的客户真的懒 身份证信息都懒得输入了哈哈...),经过慢慢研究,果然皇天不负有心人搞出来了。这个借助的是腾讯的一个SKD 腾讯优图云人脸服务TencentYoutuYun.SDK.Csharp 这个DLL文件从github下载dll文件,并添加到你项目引用里,本sdk依赖Newtonsoft.Json,也需一起引用。
1、主要用到里面的一个封装类:OCR,现在来看一下里面的参数信息
PlanRegGuest_OCR这个类就封装了身份证里面的一下详细信息
其中
public string City { get; set; } 城市
public int? Age { get; set; } 年龄
public string Birthday { get; set; } 生日
public string IDCode { get; set; } 身份证号码
public string IDName { get; set; } 姓名
public string GuestSex { get; set; } 性别
其他的还在研究中
2、下面在VS2017中新建一个MVC的项目来试一下,开始我用原始的asp.net试了下脑子卡壳了出不来,好久没写服务器空间都忘了差不多了...就换了MVC熟悉一点点。
控制器名称就是People 先看视图中的内容
上传图片身份证获取详细信息测试
if (files.length == 0) {
alert('请选择文件');return;
}
$.ajaxFileUpload(
{
url:'/People/IDCodeOcr', //请求地址
secureuri: false,
fileElementId:'FileUpload', //上传文件控件ID
dataType: 'text', //可以是json这里的格式
success: function (data) //成功函数一个异常捕获一样
{//返回的数据转json
var obj =$.parseJSON(data);//循环赋值
for (var i = 0; i < obj.length; i++) {var GuestNameDate =$.parseJSON(obj[i]);
$("#Name").val(GuestNameDate.name);
$("#Address").val(GuestNameDate.address);
$("#Birth").val(GuestNameDate.birth);
$("#ID").val(GuestNameDate.id);
$("#Sex").val(GuestNameDate.sex);
$("#Nation").val(GuestNameDate.nation);
}
},//异常处理
error: function (data, status, e)
{
alert("验证失败,请上传身份证照片!");
}
}
);
}
姓 名:
家 庭 住址:
生 日:
身份证号码:
性 别:
这里面就一个文件上传的跟一个ajaxfileupload.js 引用一下,特别说明一下 网上下载的ajaxfileupload.js已经是很老的了 只有在jQuery 1.4 一下才能用吧 不然会报错 所以我的ajaxfileupload.js是改过的 我的jQuery是1.9的开始也出错了,后来换成1.4的还是有问题 低版本的我没有试过懒得去找了就改js了
ajaxfileupload.js代码
jQuery.extend({
createUploadIframe:function(id, uri) {//create frame
var frameId = 'jUploadFrame' +id;var iframeHtml = '
iframeHtml+= ' src="' + 'JavaScript:false' + '"';
}else if (typeof uri == 'string') {
iframeHtml+= ' src="' + uri + '"';
}
}
iframeHtml+= ' />';
jQuery(iframeHtml).appendTo(document.body);return jQuery('#' + frameId).get(0);
},
createUploadForm:function(id, fileElementId, data) {//create form
var formId = 'jUploadForm' +id;var fileId = 'jUploadFile' +id;var form = jQuery('
');if(data) {for (var i indata) {
jQuery('').appendTo(form);
}
}var oldElement = jQuery('#' +fileElementId);var newElement =jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');returnform;
},
ajaxFileUpload:function(s) {//TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
s =jQuery.extend({}, jQuery.ajaxSettings, s);var id = newDate().getTime()var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false: s.data));var io =jQuery.createUploadIframe(id, s.secureuri);var frameId = 'jUploadFrame' +id;var formId = 'jUploadForm' +id;//Watch for a new set of requests
if (s.global && !jQuery.active++) {
jQuery.event.trigger("ajaxStart");
}var requestDone = false;//Create the request object
var xml ={}if(s.global)
jQuery.event.trigger("ajaxSend", [xml, s]);//Wait for a response to come back
var uploadCallback = function(isTimeout) {var io =document.getElementById(frameId);try{if(io.contentWindow) {
xml.responseText= io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
xml.responseXML= io.contentWindow.document.XMLDocument ?io.contentWindow.document.XMLDocument : io.contentWindow.document;
}else if(io.contentDocument) {
xml.responseText= io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
xml.responseXML= io.contentDocument.document.XMLDocument ?io.contentDocument.document.XMLDocument : io.contentDocument.document;
}
}catch(e) {
jQuery.handleError(s, xml,null, e);
}if (xml || isTimeout == "timeout") {
requestDone= true;varstatus;try{
status= isTimeout != "timeout" ? "success" : "error";//Make sure that the request was successful or notmodified
if (status != "error") {//process the data (runs the xml through httpData regardless of callback)
var data =jQuery.uploadHttpData(xml, s.dataType);//If a local callback was specified, fire it and pass it the data
if(s.success)
s.success(data, status);//Fire the global callback
if(s.global)
jQuery.event.trigger("ajaxSuccess", [xml, s]);
}elsejQuery.handleError(s, xml, status);
}catch(e) {
status= "error";
jQuery.handleError(s, xml, status, e);
}//The request was completed
if(s.global)
jQuery.event.trigger("ajaxComplete", [xml, s]);//Handle the global AJAX counter
if (s.global && ! --jQuery.active)
jQuery.event.trigger("ajaxStop");//Process result
if(s.complete)
s.complete(xml, status);
jQuery(io).unbind()
setTimeout(function() {try{
jQuery(io).remove();
jQuery(form).remove();
}catch(e) {
jQuery.handleError(s, xml,null, e);
}
},100)
xml= null}
}//Timeout checker
if (s.timeout > 0) {
setTimeout(function() {//Check to see if the request is still happening
if (!requestDone) uploadCallback("timeout");
}, s.timeout);
}try{var form = jQuery('#' +formId);
jQuery(form).attr('action', s.url);
jQuery(form).attr('method', 'POST');
jQuery(form).attr('target', frameId);if(form.encoding) {
jQuery(form).attr('encoding', 'multipart/form-data');
}else{
jQuery(form).attr('enctype', 'multipart/form-data');
}
jQuery(form).submit();
}catch(e) {
jQuery.handleError(s, xml,null, e);
}
jQuery('#' +frameId).load(uploadCallback);return { abort: function() { } };
},
uploadHttpData:function(r, type) {var data = !type;
data= type == "xml" || data ?r.responseXML : r.responseText;//If the type is "script", eval it in global context
if (type == "script")
jQuery.globalEval(data);//Get the JavaScript object, if JSON is used.
if (type == "json")
eval("data = " +data);//evaluate scripts within html
if (type == "html")
jQuery("
}, handleError:function(s, xhr, status, e) {//If a local callback was specified, fire it
if(s.error)
s.error(xhr, status, e);//If we have some XML response text (e.g. from an AJAX call) then log it in the console
else if(xhr.responseText)
console.log(xhr.responseText);
}
})
参数我是用JS传到后台的控制器中的这里也可以直接用Form表单 当然各有所爱看自己喜欢的。
3、下面看后台控制器里面的代码 注释都有了
usingNewtonsoft.Json;usingSystem;usingSystem.Collections.Generic;usingSystem.IO;usingSystem.Linq;usingSystem.Security.Cryptography;usingSystem.Web;usingSystem.Web.Mvc;usingTencentYoutuYun.SDK.Csharp;namespaceMVCPeopleInfoByIDCard.Controllers
{public classPeopleController : Controller
{//GET: People
publicActionResult Index()
{returnView();
}publicJsonResult IDCodeOcr()
{//获取上传图片
HttpFileCollection files =System.Web.HttpContext.Current.Request.Files;if (files.Count == 0) return Json("Faild", JsonRequestBehavior.AllowGet);
MD5 md5Hasher= newMD5CryptoServiceProvider();/*计算指定Stream对象的哈希值*/
byte[] arrbytHashValue = md5Hasher.ComputeHash(files[0].InputStream);//由以连字符分隔的十六进制对构成的String,其中每一对表示value中对应的元素;例如“F-2C-4A”
string strHashData = System.BitConverter.ToString(arrbytHashValue).Replace("-", "");string FileEextension = Path.GetExtension(files[0].FileName);string uploadDate = DateTime.Now.ToString("yyyyMMdd");string virtualPath = string.Format("/ComponentAttachments/{0}/{1}{2}", uploadDate, strHashData, FileEextension);string fullFileName =Server.MapPath(virtualPath);//创建文件夹,保存文件
string path =Path.GetDirectoryName(fullFileName);
Directory.CreateDirectory(path);if (!System.IO.File.Exists(fullFileName))
{
files[0].SaveAs(fullFileName);
}//文件名 没有路径
string fileName = files[0].FileName.Substring(files[0].FileName.LastIndexOf("\\") + 1, files[0].FileName.Length - files[0].FileName.LastIndexOf("\\") - 1);//文件大小
string fileSize = GetFileSize(files[0].ContentLength);
List results = new List();//调用dll 实例CR
OCR ocr = new OCR(fullFileName, 2);
JsonConvert.SerializeObject(ocr);
results.Add(ocr.result);var obj = Json(results, "text/html", JsonRequestBehavior.AllowGet);returnobj;
}///
///获取文件大小///
///
///
private string GetFileSize(longbytes)
{long kblength = 1024;long mbLength = 1024 * 1024;if (bytes
return decimal.Round(decimal.Divide(bytes, mbLength), 2).ToString() + "MB";
}
}
}
这里我前面的data是text类型我就返回 var obj = Json(results, "text/html", JsonRequestBehavior.AllowGet);这个格式。 调试的时候就可以看到基本信息了 在aspx页面也看到了 就是前台我取不到 数据 (有时间在研究)、
在前台页面数据也取到了 看看效果图,这里说一下,只是单纯的想做功能所以前台界面没有写验证。文件上传的类型。还有后台的一些异常处理我也没有写。一般只要是手机拍下来的身份证都可以识别出来的,我试了好几张了。
4、忙活了一天终于搞定了了,网上关于这块的介绍很少 。纸上得来终觉浅,绝知此事要躬行!有需要源码的 或者DLL文件的私密我给你。在群文件我已经上传了。新手上路各位老司机轻喷!!!
上传身份证照片js_Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息...相关推荐
- js并发上传文件到不同服务器,simple-uploader.js 功能强大的上传组件 - 文章教程
simple-uploader.js(也称 Uploader)是一个上传库,支持多并发上传,文件夹.拖拽.可暂停继续.秒传.分块上传.出错自动重传.手工重传.进度.剩余时间.上传速度等特性:该上传库依 ...
- HTML5输入框里加图片代码,做了一个input上传加号框,图片上传后显示在框中,怎么让加号消失?...
CSS代码: .div_imgall {border:1px solid blue;width:100px;height:100px;position:relative;} .input_flie { ...
- 【问题记录】tp5文件上传$_FILES有值request中file却为空
文章目录 前言 问题 排除尝试 前端 后端 小结 前言 在整理一套php代码的时候,需要添加文件上传功能,虽说我对php不算怎么熟悉,但是我想着一个简单的文件上传其实就form表单的提交能有多麻烦,谁 ...
- dropzone.js应用java_拖拽文件上传(Java篇)dropzone.js的简单使用
java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. dropzonejs 的官网是:http://www.dropzon ...
- 上传和优化Magento 2中的产品图像和视频
2019独角兽企业重金招聘Python工程师标准>>> 首先,了解如何上传以及优化Magento 2中产品的图像和视频是至关重要的.大多数Magento 2网站都有各种各样的产品以及 ...
- 如何将常用的软件上传到ESXi本地存储中管理
一.如何将常用的软件上传到ESXi本地存储中管理 在使用虚拟机时,我们可能需要多个软件.比如部署操作系统需要CentOS或者Windows的镜像,再基于操作系统安装数据库可能有需要SQLServer. ...
- 织梦后台怎么上传mp4视频到网站中
织梦后台其实是不能上传太大的文件,当我们视频文件过大时候,推荐用ftp软件上传. 对于小文件,会碰到上传MP4视频字段,然后上传时候提示文件不支持上传,或者附件不显示附件,这时候我们要怎么操作呢? 一 ...
- 如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程 作者:张国军_Suger 开发工具与关键技术:Win10.项目.图标 对于编程人员来说,有一个不可获取的图库就是阿里图标库,这 ...
- http文件上传请求在ie浏览器中被挂起,在chrome中出现Provisional headers are shown
最近项目在运行过程中用户们又反应了一个问题,说会偶尔出现图片上传失败的情况.然后将那些失败的图片拿过来进行验证,果然问题出现了,用ie浏览器在上传附件时,会显示这个请求挂起了.用谷歌浏览器在上传附件时 ...
最新文章
- final ListURL jars = new LinkedListURL();
- 【转】五、谈扩展方法的理解
- 大厂面试官手把手教你:三步写出好简历
- 聊聊JVM(五)从JVM角度理解线程
- mysql用supervisor管理_Supervisor使用详解
- set集合判断集合中是否有无元素_第八章 集合
- jdbc教程_JDBC教程
- java中BorderLayout的使用方法
- spotify电脑下载歌曲_我来简单说一下Apple Music和Spotify的下载方法
- 【读书笔记】计算广告(第3部分)
- P2168 [NOI2015]荷马史诗
- 期货与期权套期保值的对比研究
- java发出声音_Java播放声音的几种方式
- Application.DoEvent使用
- SQL SERVER 日期时间 格式
- QQ音乐做直播:与秀场无关,对数字音乐产业有何影响?
- CCNP路由实验之八 路由重发布
- TCL脚本语言详解(1)
- SpringBoot 本地缓存的使用
- 计算机系统中临界资源与临界区,2020年中国地质大学(武汉)操作系统原理
热门文章
- python 项目学编程_《从问题到程序:用Python学编程和计算》——3.5 练习-阿里云开发者社区...
- 海航金鹏携手铛铛社交,航旅社群经济引领新航旅时代
- Flutter Widget原理(一)
- 写了 12 年代码,仍旧奋斗在一线,佩服!
- 小程序获取支付二维码
- 如何做竞品分析——以植物养护类APP为例
- .png文件压缩利器Pngout !
- r library car_Stata+R:Stata 与 R 等效命令备忘录
- 视频直播技术详解之推流和传输
- 学计算机专业选文科还是理科,计算机专业学理科还是文科