jQuery实现图片转base64及上传

最新推荐文章于 2025-10-10 08:47:54 发布

原创最新推荐文章于 2025-10-10 08:47:54 发布 · 8k 阅读

3 ·

CC 4.0 BY-SA版权

HTML ，js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的身份验证页面实现方案，该页面允许用户通过拍摄身份证照片来进行FaceID验证，并展示如何通过前端技术读取和显示拍摄的照片。

部署运行你感兴趣的模型镜像

  部分HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/animation.css">
</head>
<body>
<div id="faceIdMaxBox">
    <div class="faceIdBox">
        <div class="box_12Main">
            <p class="main_p21">FaceID  身份验证</p>
            <div class="shootFrontMain_d11">
                <a class="shootFront_a11">
                    <img id="img_upload_show" />
                    <input type="file" accept="image/*" name="file" id="img_upload_file1" capture="camera" multiple="multiple" value="" />   
                    <input type="hidden" name="img_upload_base" id="img_upload_base" />  
                    <label for="img_upload_file1">点击拍摄身份证人像面</label>  
                </a>
            </div>
            <p class="main_p22">查看
                <span>拍摄须知</span>
            </p>
            <div class="shootFrontMain_d12">
                <div class="shootFront_IN11">
                    <span class="shootFront_Sp11">姓名</span>
                    <input class="shootFront_InB11 identifyName" type="text" name="" maxlength="" disabled="disabled">
                </div>
                <div class="shootFront_IN12">
                    <span class="shootFront_Sp11">身份证</span>
                    <input class="shootFront_InB11 identifyID" type="text" name="" maxlength="18" disabled="disabled">
                </div>
            </div>
            <a class="main_a21 shootFront_a12"><span>下一步</span>拍摄身份证国徽面</a>
            <a class="main_a22">退出验证</a>
        </div>
    </div>
</body>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/action.js"></script>
</html>




js代码

  // 上传身份证正面照
    $(function(){
        $("#img_upload_file1").change(function() {  
                var file = this.files[0];  
                var reader = new FileReader();  
                reader.readAsDataURL(file);//调用自带方法进行转换  
                reader.onload = function(e) {  
                    $("#img_upload_show").attr("src", this.result);//将转换后的编码存入src完成预览  
                    $("#img_upload_base").val(this.result);//将转换后的编码保存到input供后台使用  
                    // alert(this.result);
                    var img=$("#img_upload_base").val();
                    // var imgType=img.Substring(0,i)
                    var imgNum = img.split(";base64,");
                    var imgBase=imgNum[1];
                    // alert(img);
                    // alert(imgBase);
                    $(".FloatingBox").show();
                    $(".PullOutFloatingMain").show();
                    $(".PullOut_p11").html("正在上传识别");
                    $(".PullOut_p12").html("正在上传识别");
                    // location.href = "shootFront.html";

                    $.ajax({  
                        url: "ddddd",
                        type: "post",
                        dataType: 'json',
                        contentType : 'application/json;charset=utf-8',
                        data: JSON.stringify({
                                "application":"jtyh", //应用类型
                                "image":imgBase,       //身份证图片base64编码字符串
                                "imageName":"cdf.jpg", //图片名称  比如用户ID
                                "legality":"1"//身份证合法性性校验标志 "1":校验 "0":不校验
                              }),
                        success: function (data) {
                            // alert(data);
                            $(".FloatingBox").hide();
                            $(".PullOutFloatingMain").hide();
                            // location.href = "shootFront.html";
                            // location.href="shootFront.html?imgBase="+imgBase;//发送txt里面的内容
                            // alert(data.data.name);
                            var idName=data.data.name;
                            var idenID=data.data.id_card_number;
                            // alert(data.data.side);
                            // alert(idenID);
                            if(idName==undefined||idName==""){
                                // alert('fail');
                                $(".FloatingBox").show();
                                $(".pictureAndVideoFloatingMain").show();
                                $(".pictureAndVideo_p11").html("拍摄面不符");
                                $(".pictureAndVideo_p12").html("请拍摄身份证人像面");

                            }else{
                                $(".identifyName").val(idName);
                                $(".identifyID").val(idenID);
                                 setCookie("idName",idName,1);
                                 setCookie("idenID",idenID,1);
                                // alert(data.code);
                                // alert(data.msg);
                                // alert(data.data.name);
                                // alert(data.data.id_card_number);
                                $('.shootFront_a12').attr('href','shootReverse.html');
                            }   
                        }
                    });   
                };    
        });
    });

您可能感兴趣的与本文相关的镜像