Asp.Net MVC 中JS經過ajaxfileupload上傳圖片獲取身份證姓名、生日、家庭住址等詳細信息

時間 2019-11-12

標籤 asp.net asp mvc 經過 ajaxfileupload 上傳圖片獲取身份證姓名生日家庭住址詳細信息欄目 ASP 简体版

原文原文鏈接

客戶要求用身份證圖片上傳獲取身份證的詳細信息就下來研究了一下（如今的客戶真的懶身份證信息都懶得輸入了哈哈...），通過慢慢研究，果真皇天不負有心人搞出來了。這個藉助的是騰訊的一個SKD 騰訊優圖雲人臉服務TencentYoutuYun.SDK.Csharp 這個DLL文件從github下載dll文件，並添加到你項目引用裏，本sdk依賴Newtonsoft.Json，也需一塊兒引用。javascript

一、主要用到裏面的一個封裝類：OCR，如今來看一下里面的參數信息css

PlanRegGuest_OCR這個類就封裝了身份證裏面的一下詳細信息html

其中java

public string City { get; set; } 城市jquery

public int? Age { get; set; } 年齡git

public string Birthday { get; set; } 生日github

public string IDCode { get; set; } 身份證號碼ajax

public string IDName { get; set; } 姓名json

public string GuestSex { get; set; } 性別服務器

其餘的還在研究中

二、下面在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表單固然各有所愛看本身喜歡的。

三、下面看後臺控制器裏面的代碼註釋都有了

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";
        }
    }
}