Andriod app开发中身份信息验证模块,利用appcan实现照片的上传

我觉着这代码应该没问题来着,总是不对。

望大家来找茬,我对appcan其实不熟悉

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="../../static/ui/css/ui-box.css">
    <link rel="stylesheet" href="../../static/mdui/css/mdui.css">
    <link rel="stylesheet" type="text/css" href="../../static/mdui/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/ui/css/ui-base.css">
    <link rel="stylesheet" href="../../static/ui/css/ui-color.css">
    <link rel="stylesheet" href="../../static/ui/css/appcan.icon.css">
    <link rel="stylesheet" href="../../static/ui/css/appcan.control.css">
    <link rel="stylesheet" href="../../static/mdui/css/mdui.listpicker.css">
    <link rel="stylesheet" href="../../static/mdui/css/mdui.dtpicker.css">
    <link rel="stylesheet" href="../../static/mdui/css/custom.css">
    <style>

        .mdui-table-view-cell:last-child:before, .mdui-table-view-cell:last-child:after{
            height: .0625rem !important;

        }
        .mdui-table-view-cell:after{
            left: 0 !important;

        }
        .mdui-table-view-cell{
            padding:.3rem  0 !important;
        }
        .mdui-table-view-cell > a:not(.mdui-btn){
            margin: 0 !important;
            padding-left: 0.875rem;
        }
        .mdui-popover .mdui-popover-arrow:after{
            height:0 !important;
        }
        .custome-sex-ul li:after,.custome-sex-ul li:last-child:after{
            height: 0 !important;
        }
        .custome-sex-ul li{
            color: #ccc;
        }
        .mdui-popover .mdui-table-view .mdui-table-view-cell:first-child, .mdui-popover .mdui-table-view .mdui-table-view-cell:first-child > a:not(.mui-btn){
            border-radius: 0 !important;
        }
        #exit{
            left: 50% !important;
            margin-left: -8.75rem !important;
        }
        .red-cube,.blue-cube,.green-cube{
            width:100%;
            height: 5rem;
        }
        .mdui-table-view-cell > a:not(.mdui-btn){
            padding: 0 !important;
        }
    </style>

</head>
<body class="um-vp " ontouchstart  >
<div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
    <!--header开始-->
    <div id="header" class="uh bc-text-head ub bc-head">
        <div class="nav-btn" id="nav-left">
            <div class="fa fa-angle-left fa-2x"></div>
        </div>
        <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">实名认证</h1>
        <div class="nav-btn nav-bt" id="nav-right">
            <div class="ub-img iocn-more umw2 umh4"></div>
        </div>
    </div>
    <!--header结束--><!--content开始-->
    <div id="content" class="ub-f1 tx-l" style="overflow-y: auto;overflow-x:hidden;background-color: #fff; padding:0 0.75rem;">
        <ul class="mdui-table-view">
            <Li class="mdui-table-view-cell">
                <div class="mdui-box">
                    <div class="certi-name">姓        名</div>
                    <div class="mdui-box-flex-1">
                        <input type="text" class="cierti-ipt"   id="name-iptID" >
                    </div>
                </div>
            </Li>
            <Li class="mdui-table-view-cell">
                <div class="mdui-box">
                    <div class="certi-name">性        别</div>
                    <div class="mdui-box-flex-1">
                        <a  class="sex-choose">
                            <div type="text" class="cierti-ipt" id="cierti-ipt"  style="padding-left: 0.9375rem"></div>
                        </a>
                    </div>
                </div>
            </Li>
            <Li class="mdui-table-view-cell">
                <div class="mdui-box">
                    <div   class="certi-name" >出生日期</div>
                    <div class="mdui-box-flex-1">
                        <div   class="cierti-ipt btn mdui-btn mdui-btn-block certi-name dateTimeing" id="birthday"></div>
                    </div>
                </div>
            </Li>
            <Li class="mdui-table-view-cell">
                <div class="mdui-box">
                    <div class="certi-name">家庭住址</div>
                    <div class="mdui-box-flex-1">
                        <input type="text" class="cierti-ipt"  id="familyAddress"/>
                    </div>
                </div>
            </Li>
            <Li class="mdui-table-view-cell">
                <div class="mdui-box">
                    <div class="certi-name">身份证号</div>
                    <div class="mdui-box-flex-1">
                        <input type="text" class="cierti-ipt"  id="idNumber"/>
                    </div>
                </div>
            </Li>
            <Li class="mdui-table-view-cell">
                <div class="mdui-box">
                    <div class="certi-name">发证机关</div>
                    <div class="mdui-box-flex-1">
                        <input type="text" class="cierti-ipt"  id="licenceIssuingAuthority"/>
                    </div>
                </div>
            </Li>
            <Li class="mdui-table-view-cell">
                <div class="mdui-box">
                    <div class="certi-name">有效期起</div>
                    <div class="mdui-box-flex-1">
                        <div  class="cierti-ipt btn mdui-btn mdui-btn-block certi-name dateTimeing" id="startTime"></div>
                    </div>
                </div>
            </Li>
            <Li class="mdui-table-view-cell">
                <div class="mdui-box">
                    <div class="certi-name">有效期止</div>
                    <div class="mdui-box-flex-1">
                        <div   class="cierti-ipt btn mdui-btn mdui-btn-block certi-name dateTimeing"  id="endTime"></div>
                    </div>
                </div>
            </Li>
        </ul>
        <p class="export-Notes">你需要上传:1、身份证正面照片;2、身份证背面照片;3、持证半身照</p>
        <ul class="mdui-table-view export-img ">
            <li class="mdui-table-view-cell  mdui-col-xs-4" >
                <div  >
                    <input type="hidden" id="photo1"/>
                    <img  myAttr="1" style="height: 4rem;width: 4rem;" class="photo-a" src="../../static/app/img/index/add_pic.png">
                </div>
            </li>
            <li class="mdui-table-view-cell  mdui-col-xs-4"  >
                <div  >
                    <input type="hidden" id="photo2"/>
                    <img  myAttr="2" src="../../static/app/img/index/add_pic.png" style="height: 4rem;width: 4rem;"  class="photo-a">
                </div>
            </li>
            <li class="mdui-table-view-cell  mdui-col-xs-4" >
                <div  >
                    <input type="hidden" id="photo3"/>
                    <img myAttr="3" src="../../static/app/img/index/add_pic.png"  style="height: 4rem;width: 4rem;"  class="photo-a">
                </div>
            </li>
        </ul>
        <button class="certi-btn"  id="determine-btn">确定</button>
    </div>
    <!--content结束-->
</div>
<!--身份证填写-->
<div class="card-bg" style="display: none">
    <div class="card-img">
        <div class="card-content">
            <div  class="card-content-one">
                <span>1</span>
                <em class="hide-span"></em>
                <p>找一处背景颜色比较纯、光线明亮适中的地方在拍摄时,确保五冠和照片基本一致,不要遮挡面部,如果女生头发比较长,可以用橡筋扎起来。</p>
                <P><img src="../../static/app/img/index/cardPerson.png"> </P>
            </div>
            <div  class="card-content-one">
                <span>2</span>
                <em class="hide-span"></em>
                <p>证件上的文字清晰可识别</p>
                <P><img src="../../static/app/img/index/cardZ.png"> </P>
            </div>
            <div  class="card-content-one last-cardone">
                <span>3</span>
                <p>证件上的文字清晰可识别,证件有效期在一个月以上</p>
                <P><img src="../../static/app/img/index/cardF.png"> </P>
            </div>
        </div>
    </div>
</div>
<!--性别选择-->
<div class="exitbg" >
    <div  class=" exit-content" style="height: auto;" >
        <div  ><p class=" certi-title"  > 请选择</p></div>
        <div class=""  >
            <ul class="mdui-table-view certi-ul" >
                <li class="mdui-table-view-cell" id="cancel">
                    <a>女</a>
                </li>
                <li class="mdui-table-view-cell" id="quit">
                    <a>男</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--相机弹出框-->
<div class="showphone take-phonto">
    <div>
        <ul class="mdui-table-view takePhoto">
            <li class="mdui-table-view-cell">
                <a class="choose-file-a Choose_Album" >
                    从手机中选择
                </a>
            </li>
            <li class="mdui-table-view-cell">
                <a class="takeing_ph">拍照</a>
            </li>
        </ul>
        <ul class="mdui-table-view">
            <li class="mdui-table-view-cell">
                <a οnclick="closeShow()"><b>取消</b></a>
            </li>
        </ul>
    </div>
</div>
<!--相机弹出框-->
<div class="showphone del-take-phonto">
    <div>
        <ul class="mdui-table-view takePhoto"  >
            <li class="mdui-table-view-cell">
                <a class="choose-file-a big-picture">
                    查看大图
                </a>
            </li>
            <li class="mdui-table-view-cell">
                <a class="delphone">删除</a>
            </li>
        </ul>
        <ul class="mdui-table-view">
            <li class="mdui-table-view-cell">
                <a οnclick="closeShow()"><b>取消</b></a>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript"  src="../../static/mdui/js/mdui.min.js"></script>
<script src="../../static/ui/js/appcan.js"></script>
<script src="../../static/ui/js/appcan.control.js"></script>
<script src="../../static/ui/js/appcan.tab.js"></script>
<script src="../../static/common/js/server.js"></script>
<script>
    //照片提交路径
    var uploadHttp="http://125.70.9.159:8081/file/file_operator/upload";
    var uploadKey=1;
    $.uexWindowReady(function (){
        //返回
        $("#nav-left").on('tap',function () {
            $.closeWin();
        });
        //填写写信内容
        $("#custome-createLetter").on('tap',function () {
            $.openWin({
                name:'letter',
                url:'user_appeal_pub_content.html',
                animId:2,
                animDuration:200,
                pageParam:{}
            });
        });
    });
    /*
     *时间日期函数
     */
    /*function DateChoose(birthyday){
     var myDate = new Date();
     var yearDate=myDate.toLocaleDateString();
     uexControl.openDatePicker(yearDate);
     uexControl.cbOpenDatePicker = function(opId,dataType,data) {
     var obj = eval('('+data+')');
     var htmlyear=obj.year+"-"+obj.month+"-"+obj.day;
     birthyday.innerHTML=htmlyear;
     }
     }*/
    $(".dateTimeing").on('tap',function(){
        var myDate = new Date();
        var yearDate=myDate.toLocaleDateString();
        uexControl.openDatePicker(yearDate);
        var thising=$(this);
        uexControl.cbOpenDatePicker = function(opId,dataType,data) {
            var obj = eval('('+data+')');
            var htmlyear=obj.year+"-"+obj.month+"-"+obj.day;
            thising.html(htmlyear)
        }
        return "";
    });
    /*弹出显示框
     */
    $("#cierti-ipt").on('tap',function () {
        $(".exitbg").show();
    });
    //获取性别的值
    $(".certi-ul li a").on('tap',function() {
        $("#cierti-ipt").html($(this).html());
        $(".exitbg").hide();

        /*var e = window.event || event;
        if ( e.stopPropagation ){ //如果提供了事件对象,则这是一个非IE浏览器
            e.stopPropagation();
        }else{
            //兼容IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
        }*/
    });

    $(".card-bg").on('tap',function () {
        $(".card-bg").hide();
    });
    /*照相机功能*/
    $(".photo-a").on('tap',function () {
        var photo=$(this);
        if(photo.attr('src')=='../../static/app/img/index/add_pic.png'){
            /*调用appcan相机*/
            $(".take-phonto").show();
            $(".takeing_ph").on('tap',function () {
                uexCamera.open();
            });
            /*从相册中选择*/
            $(".Choose_Album").on('tap',function () {
                uexImageBrowser.pick();
            });
            /*相册回调函数*/
            uexImageBrowser.cbPick=function(opCode, dataType, data) {
                photo.attr("src",data);
                $(".take-phonto").hide();
                uploadImg(data);
            };
            /*相机的回调函数*/
            uexCamera.cbOpen = function(opCode, dataType, data){
                if(dataType==0){
                    photo.attr("src",data);
                    $(".take-phonto").hide();
                    uploadImg(data);
                }
            };
            /*上传回调函数*/
            uexUploaderMgr.cbCreateUploader = function(id, dataType, data){
                if(data==0){
                }else{
                    alert("上传失败");
                    uexUploaderMgr.closeUploader(uploadKey);
                }
            }
            uexUploaderMgr.onStatus = function(opCode, fileSize, percent, serverPath,
                                               status) {
                switch (status) {
                    case 0:
                        showMask(true, '上传进度:' + percent + '%', 30, true);
                        break;
                    case 1:
                        alert("服务器上路径:"+serverPath);
                        uploadSeccess(serverPath);
                        break;
                    case 2:
                        appcan.window.alert("上传错误!");
                        break;
                    default:
                        appcan.window.alert("错误,上传遇到问题,请稍后再试。")
                        uexUploaderMgr.closeUploader(uploadKey);
                        uploadKey = uploadKey + 1;
                        hideMask();
                        break;
                }
            };
        }else{
            $(".del-take-phonto").show();
            /*查看大图*/
            $(".big-picture").on('tap',function () {
                var bigsrc= photo.attr('src');
                uexImageBrowser.open(bigsrc);
            });
            /*删除图片并换成默认的图片*/
            $(".delphone").on('tap',function () {
                photo.attr("src",'../../static/app/img/index/add_pic.png');
                $(".del-take-phonto").hide();
            })
        }
    });
    function uploadSeccess(rsData){
        var rsObj = $.parseJSON(rsData);
        var num=$(this).attr("myAttr");
        $("#photo"+num).val(rsObj.data);
        appcan.window.openToast("上传成功", 1000);
        uexUploaderMgr.closeUploader(uploadKey);
        uploadKey = uploadKey + 1;
    }
    function uploadImg(data){
        uexUploaderMgr.CreateUploader(uploadKey, uploadHttp);//创建上传工具
        uexUploaderMgr.uploadFile(uploadKey, data, "file", 3);//上传文件
        showMask(true, '正在上传图片,请稍后', 60, true);
    }
    function  closeShow() {
        $(".showphone").hide();
    }
    //遮罩样式
    function showMask(isShowToast, msg, times, isProcess) {
        $("#maskDiv").show();
        if (isShowToast) {
            appcan.window.openToast({
                msg : msg,
                duration : times * 1000,
                position : 5,
                type : isProcess ? 1 : 0
            });
        }
    }

    function hideMask() {
        $("#maskDiv").hide();
        appcan.window.closeToast();
    }
    /*
     *非空验证
     */

    function validate(){
        var subObj={
            isValid:true,
            memberId:"",
            cardType:'01',
        };
        var nameIptID=$("#name-iptID");//姓名
        var sex=$("#cierti-ipt");//性别
        var birthday=$("#birthday");//出生日期
        var familyAddress=$("#familyAddress");//家庭住址
        var idNumber=$("#idNumber");//身份证号
        var licenceIssuingAuthority=$("#licenceIssuingAuthority");//发证机关
        var startTime=$("#startTime");//有效期起
        var endTime=$("#endTime");//有效期结束

        if(nameIptID.val()=="" || nameIptID.val()==null){
            alert("姓名不能为空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.name=nameIptID.val();

        if(sex.html()=="" ||sex.html()==null){
            alert("性别不能空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.sex=sex.html();

        if(birthday.html()=="" || birthday.html()==null){
            alert("出生日期不能为空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.birthday=birthday.html();

        if(familyAddress.val()=="" || familyAddress.val()==null){
            alert("家庭住址不能为空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.address=familyAddress.val();

        if(idNumber.val()=="" || idNumber.val()==null){
            alert("身份证号不能为空");
            subObj.isValid=false;
            return subObj;
        }

        if ( $.isIdcard(idNumber.val())==false){
            alert("身份证号格式不正确");
            subObj.isValid=false;
            return subObj;
        }
        subObj.cardNo=idNumber.val();

        if(licenceIssuingAuthority.val()=="" || licenceIssuingAuthority.val()==null){
            alert("发证机关不能为空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.cardChannel=licenceIssuingAuthority.val();

        if(startTime.html()=="" || startTime.html()==null){
            alert("有效期起不能为空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.cardTime=startTime.html();

        if(endTime.html()=="" || endTime.html()==null){
            alert("有效期结束不能为空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.cardLaster=endTime.html();

        var photo1=$("#photo1").val();
        if(appcan.trim(photo1)=="" || photo1==null){
            alert("正面照片不能为空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.cardFrontId=photo1;

        var photo2=$("#photo2").val();
        if(appcan.trim(photo2)=="" || photo2==null){
            alert("背面照片不能为空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.cardFrontId=photo2;

        var photo3=$("#photo3").val();
        if(appcan.trim(photo3)=="" || photo3==null){
            alert("半身照片不能为空");
            subObj.isValid=false;
            return subObj;
        }
        subObj.cardFrontId=photo3;

        return subObj;
    }
    $("#determine-btn").on('tap',function(){
        var subObj=validate();
        var url="http://125.70.9.159:8081/usercenter/memberIV/commit";
        if(subObj.isValid){
            showMask(true, '正在提交数据,请稍后', 60, 1);
            appcan.ajax({
                url:url,
                data:subObj,
                type:"POST",
                success:function(rsData, status, requestCode, response,
                                 xhr){
                    appcan.window.alert("成功", "实名认证信息提交成功,请等待审核.", "返回",function(){
                        alert("测试appcan");
                    });
                },
                error:function(){
                    alert("回调失败");
                }
            });
        }
    })
</script>

</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值