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 == 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("验证失败,请上传身份证照片!");
                    }
                }

            );

        }
    </script>
    <style>
        input{border:0px; font-size:28px; font-weight:600; 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>
        姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:
        <input type="text" id="Name" /><br /><br />

        家&nbsp;庭&nbsp;住址:
        <input type="text" id="Address" /><br /><br />

        生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日:
        <input type="text" id="Birth" /><br /><br />

        身份证号码: <input type="text" id="ID" /><br /><br />

        性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:
        <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 == 0) return Json("Faild", JsonRequestBehavior.AllowGet);
            MD5 md5Hasher = new MD5CryptoServiceProvider();
            /*计算指定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<string> results = new List<string>();
            //调用dll  实例CR
            OCR ocr = new OCR(fullFileName, 2);
            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 = 1024;
            long mbLength = 1024 * 1024;
            if (bytes < kblength)
                return bytes.ToString() + "B";
            if (bytes < mbLength)
                return decimal.Round(decimal.Divide(bytes, kblength), 2).ToString() + "KB";
            else
                return decimal.Round(decimal.Divide(bytes, mbLength), 2).ToString() + "MB";
        }
    }
}

这里我前面的data是text类型我就返回 var obj = Json(results, "text/html", JsonRequestBehavior.AllowGet);这个格式。 调试的时候就可以看到基本信息了 在aspx页面也看到了 就是前台我取不到 数据 (有时间在研究)、

在前台页面数据也取到了  看看效果图,这里说一下,只是单纯的想做功能所以前台界面没有写验证。文件上传的类型。还有后台的一些异常处理我也没有写。一般只要是手机拍下来的身份证都可以识别出来的,我试了好几张了。

4、忙活了一天终于搞定了了,网上关于这块的介绍很少 。纸上得来终觉浅,绝知此事要躬行!有需要源码的 或者DLL文件的私密我给你。在群文件我已经上传了。新手上路各位老司机轻喷!!!

原文地址:https://www.cnblogs.com/w5942066/p/9038829.html

时间: 2024-08-04 19:55:55

Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息的相关文章

angular.js的路由和模板在asp.net mvc 中的使用

我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.asp.net mvc 的路由是通过不同的URL到不同的controller然后交给controller去呈现视图.但是在angular.js则是需要提前指定一个module(ng-app),然后去定义路由规则,通过不同的URL,来告诉ng-app 去加载哪个页面.再渲染到ng-view.通过angular.js路由的使用,可以很容易实现页面的局部刷新.更加高效的去创建

在ASP.NET MVC中,使用Bundle来打包压缩js和css

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

ASP.NET MVC中使用ASP.NET AJAX异步访问WebService

使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也没什么大的差别. 在ASP.NET应用程序里使用ASP.NET AJAX访问WebService通常都是通过ScriptMananger引入WebService生成客户端代理的方法,同时也可以使用Microsoft Ajax Library来完成.本文将介绍在ASP.NET MVC中使用ASP.NE

在asp.net mvc中使用PartialView返回部分HTML段

问题链接: MVC怎样实现异步调用输出HTML页面 该问题是个常见的 case, 故写篇文章用于提示新人. 在asp.net mvc中返回View时使用的是ViewResult,它继承自ViewResultBase 同一时候它还有个兄弟PartialViewResult 相信聪明的你已经知道了它俩的差别了,没错 一个用于返回总体,还有一个返回局部(部分). 如果我有这样一个需求,输入username,然后返回相关信息.之前的做法可能会是用json格式来返回用户的相关信息,然后到页面去渲染相关 的

Asp.Net MVC中使用ACE模板之Jqgrid

第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间. 发现虽然不是完美,整体效果还是不错,特此分享给园友.这一节先讲其中的Jqgrid.按照国际惯例,先上两张图. 集成了button,form,treeview以及日历,时间轴.chart等控件,非常丰富.下面是Jqgrid在MVC中的使用. jqgrid的加载,排序,查找都是基于后台方法,不是在内存中完成,但也有一些小坑.下面一一道

关于在ASP.NET MVC 中使用EF的Code First的方式来读取数据库时的Validation failed for one or more entities. See &#39;EntityValidationErrors&#39; property for more details.

今天在做一个小网站的时候遇到很多问题唉,我还是个菜鸟,懂的也不多,今天一个表单的提交按钮用不了,都弄了几个小时唉.不过最后还是搞定了,还有浏览器有开发人员选项,不然我都不知道我还要继续排查多久哦,今天晚上在把数据存入数据库的又出现了问题.我使用的是Entity Framework的Code First模式来访问数据库的.对于数据的验证我在数据模型上加了数据注解.当然在前台也引入了一些JS这样就可以再不把数据提交到服务器时完成验证功能.在后台保存用户提交的数据的时候,我们要用到ModelStatu

Asp.net MVC 中Controller返回值类型ActionResult

内容转自 http://blog.csdn.net/pasic/article/details/7110134 Asp.net MVC中Controller返回值类型 在mvc中所有的controller类都必须使用"Controller"后缀来命名并且对Action也有一定的要求: 必须是一个public方法 必须是实例方法 没有标志NonActionAttribute特性的(NoAction) 不能被重载 必须返回ActionResult类型 如: [csharp] view pl

ASP.NET MVC中对Model进行分步验证的解决方法

原文:ASP.NET MVC中对Model进行分步验证的解决方法 在我之前的文章:ASP.NET MVC2.0结合WF4.0实现用户多步注册流程中将一个用户的注册分成了四步,而这四个步骤都是在完善一个Model的信息,但是又分页面填写信息的,当时我加上ModelState.IsValid这句验证代码的时候,根本没法通过验证,因为在注册的前面三步,注册用户的Model信息都没填写完整,而ModelState.IsValid是对一个实体的所有属性进行判断验证的.当时很纠结,因为刚接触Asp.net

ASP.NET MVC中加载WebForms用户控件(.ascx)

原文:ASP.NET MVC中加载WebForms用户控件(.ascx) 问题背景 博客园博客中的日历用的是ASP.NET WebForms的日历控件(System.Web.UI.WebControls.Calendar),它会为“上一月”.“下一月”的链接生成"__doPostBack()"的js调用,如下图: 目前发现它会带来两个问题: 1. 不支持IE10: 2. 某些电脑不允许执行__doPostBack. 问题提炼 前提: 我们想以最低的成本解决这个问题,也就是对当前代码尽可