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 先看视图中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上传图片身份证获取详细信息测试</title>
<script type="text/javascript" src="~/Scripts/jquery-1.9.0.min.js"></script>
<script src="~/Scripts/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript"> function ajaxFileUpload(e) {
var files = $('input[name="FileUpload"]').prop('files');//获取到文件列表
if (files.length == ) {
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 = ; 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("验证失败，请上传身份证照片！");
}
} ); }
</script>
<style>
input{border:0px; font-size:28px; font-weight:; width:1000px;}
</style>
</head> <body>
<br /><br /><br /><br /><br />
<table class="pro_pic_tb">
<tbody>
<tr>
<td>
<p>
<span class="input-file">
<input style=" width:1000px; height:50px; font-size:16px;" type="file" name="FileUpload" ID="FileUpload" onchange="javascript:ajaxFileUpload();" />
</span> </p>
</td>
</tr>
</tbody>
</table>
姓 名：
<input type="text" id="Name" /><br /><br /> 家 庭 住址：
<input type="text" id="Address" /><br /><br /> 生 日：
<input type="text" id="Birth" /><br /><br /> 身份证号码： <input type="text" id="ID" /><br /><br /> 性 别：
<input type="text" id="Sex" /><br /><br />
</body>
</html>
这里面就一个文件上传的跟一个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 = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
if (window.ActiveXObject) {
if (typeof uri == 'boolean') {
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('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
if (data) {
for (var i in data) {
jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').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');
return form;
},
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 = new Date().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;
var status;
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]);
} else
jQuery.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("<div>").html(data).evalScripts();
return data;
}, 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、下面看后台控制器里面的代码 注释都有了
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Security.Cryptography;
using System.Web;
using System.Web.Mvc;
using TencentYoutuYun.SDK.Csharp; namespace MVCPeopleInfoByIDCard.Controllers
{
public class PeopleController : Controller
{
// GET: People
public ActionResult Index()
{
return View();
} public JsonResult IDCodeOcr()
{
//获取上传图片
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
if (files.Count == ) return Json("Faild", JsonRequestBehavior.AllowGet);
MD5 md5Hasher = new MD5CryptoServiceProvider();
/*计算指定Stream对象的哈希值*/
byte[] arrbytHashValue = md5Hasher.ComputeHash(files[].InputStream);
//由以连字符分隔的十六进制对构成的String，其中每一对表示value中对应的元素；例如“F-2C-4A”
string strHashData = System.BitConverter.ToString(arrbytHashValue).Replace("-", "");
string FileEextension = Path.GetExtension(files[].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[].SaveAs(fullFileName);
}
//文件名 没有路径
string fileName = files[].FileName.Substring(files[].FileName.LastIndexOf("\\") + , files[].FileName.Length - files[].FileName.LastIndexOf("\\") - );
//文件大小
string fileSize = GetFileSize(files[].ContentLength);
List<string> results = new List<string>();
//调用dll 实例CR
OCR ocr = new OCR(fullFileName, );
JsonConvert.SerializeObject(ocr);
results.Add(ocr.result);
var obj = Json(results, "text/html", JsonRequestBehavior.AllowGet);
return obj; }
/// <summary>
/// 获取文件大小
/// </summary>
/// <param name="bytes"></param>
/// <returns></returns>
private string GetFileSize(long bytes)
{
long kblength = ;
long mbLength = * ;
if (bytes < kblength)
return bytes.ToString() + "B";
if (bytes < mbLength)
return decimal.Round(decimal.Divide(bytes, kblength), ).ToString() + "KB";
else
return decimal.Round(decimal.Divide(bytes, mbLength), ).ToString() + "MB";
}
}
}
这里我前面的data是text类型我就返回 var obj = Json(results, "text/html", JsonRequestBehavior.AllowGet);这个格式。 调试的时候就可以看到基本信息了 在aspx页面也看到了 就是前台我取不到 数据 （有时间在研究）、
在前台页面数据也取到了 看看效果图，这里说一下，只是单纯的想做功能所以前台界面没有写验证。文件上传的类型。还有后台的一些异常处理我也没有写。一般只要是手机拍下来的身份证都可以识别出来的，我试了好几张了。
4、忙活了一天终于搞定了了，网上关于这块的介绍很少 。纸上得来终觉浅，绝知此事要躬行！有需要源码的 或者DLL文件的私密我给你。在群文件我已经上传了。新手上路各位老司机轻喷！！！
Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息的更多相关文章
- ASP.NET MVC 中使用 AjaxFileUpload 插件时，上传图片后不能显示（预览）
AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...
- ASP.NET MVC 中CSS JS压缩合并 功能的使用方法
通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...
- angular.js的路由和模板在asp.net mvc 中的使用
angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...
- js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域
js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...
- C# MVC 用户登录状态判断 【C#】list 去重（转载） js 日期格式转换（转载） C#日期转换（转载） Nullable<System.DateTime>日期格式转换 （转载） Asp.Net MVC中Action跳转（转载）
C# MVC 用户登录状态判断 来源:https://www.cnblogs.com/cherryzhou/p/4978342.html 在Filters文件夹下添加一个类Authenticati ...
- 如何在 ASP.NET MVC 中集成 AngularJS（3）
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
- 如何在 ASP.NET MVC 中集成 AngularJS（2）
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- 如何在 ASP.NET MVC 中集成 AngularJS（1）
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
随机推荐
- [Django] 单元测试小记
从前很少写单元测试了,特别是web应用.最近不知不觉喜欢起来这个事情了,发现单元测试对于软件的模块,正交性有很大促进作用,因为函数,模块写的不合理,单元测试写起来就麻烦的多呀.公司的项目一直都是用Dj ...
- Activity堆栈管理
task就好像是能包含很多activity的栈. 默认情况下,一个activity启动另外一个activity时,两个activity是放在同一个task栈中的,第二个activity压入第一个 ac ...
- 反对抄袭 正解spring的@Autowired 不要相信网上的错误版本
首先,最重要的, @Autowired的就是用来来消除 set ,get方法． 有些介绍,如著名的马士兵,说要在set方法上进行注入．我当时就看不明白了,既然只取消了一个GET,这个@Autowire ...
- 在VS2012中实现Ext JS的智能提示太简单了
Visual Studio 2012太强大了,居然能自己会去提取Ext JS的类的属性和方法,从而实现只能提示.下面就来介绍一下实现这个功能. 在Visual Studio 2012中随便创建一个We ...
- nfc近场通信
NFC简介: Near Field Communication 近场通信,是一种数据传输技术. 与wifi.蓝牙.红外线等数据传输技术的一个主要差异就是有效距离一般不能超过4cm. NFC支持3种工作 ...
- 计算机网络-TCP/IP HTTP Conclusion
1.1OSI 与 TCP/IP 各层的结构 1.2 三次握手和四次挥手,TCP为什么三次握手,四次挥手 在第一次消息发送中,A随机选取一个序列号作为自己的初始序号发送给B:第二次消息B使用ack对A的 ...
- 经典的java中return和finally问题!
经典的java中return和finally问题! 标签: 杂谈 分类: java学习 前一段时间 参加公司的笔试问了这个问题,回来一查才知道当时自己做错了,百思不得其解,上网查到下面的程序,但是运行 ...
- 前端技术之_CSS详解第五天
前端技术之_CSS详解第五天 一.行高和字号 1.1 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的. <!DOCTYPE html ...
- Go碎碎念
1. 时间类型转换为字符串类型 now := time.Now() fmt.Println(now.Format("2006-01-02 03:04:05 PM")) yester ...
- #cat /proc/meminfo 详解
$cat /proc/meminfoMemTotal: 2052440 kB //总内存MemFree: 50004 kB //空闲内存Buffers: ...