Andriod app开发中身份信息验证模块，利用appcan实现照片的上传
2024-04-20 17:57:39
我觉着这代码应该没问题来着，总是不对。
望大家来找茬，我对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>Andriod app开发中身份信息验证模块，利用appcan实现照片的上传相关推荐
- java做直播需要哪些技术_直播APP开发中需要解决哪些技术难点？千联信息
泛娱乐发展的火热,网红经济不断发酵的今天,不少企业靠着开发直播APP狠狠的赚了一波,导致很多人眼红,也想投入其中. 那么开发一款直播APP开发中需要解决哪些技术难点?小编在这里就来为大家解答: 视频直 ...
- 短视频app开发中，给短视频加水印的技术该如何实现
在短视频app开发中,对短视频编辑功能的开发是必不可少的,短视频的编辑处理模块包括视频裁剪.延时/加速特效.视频滤镜.音乐混音.静态贴纸.加水印等模块,我们现在来讲解一下,如果想给短视频添加水印,该如 ...
- 婚恋交友app开发中需要注意的安全问题
前言 随着移动设备的普及,婚恋交友app已经成为了人们生活中重要的一部分.但是,这些应用的开发者需要确保应用的安全性,以保护用户的隐私和数据免受攻击.本文将介绍在婚恋交友app开发中需要注意的安全问题 ...
- HTML5+移动APP开发中遇到的各种代码元素的含义（四）
系列目录 跨平台移动APP开发中遇到的各种代码元素的含义(一) HTML5+移动APP开发中遇到的各种代码元素的含义(二) HTML5+移动APP开发中遇到的各种代码元素的含义(三) 目录 系列目录 ...
- c语言实现进程隐藏和保护,C/C++程序开发中实现信息隐藏的三种类型
无论是模块化设计,还是面向对象设计,还是分层设计,实现子系统内部信息的对外隐藏都是最关键的内在要求.以本人浅显的经验,把信息隐藏按照程度的不同分成(1)不可见不可用(2)可见不可用(3)可见可用. 1 ...
- 多语言应用开发中本地化信息对照表
多语言应用开发中本地化信息对照表.包含区域编号.本地化名称.英语名称.中文名称.国家地区码.语言代码和流通币种等. 区域编号 本地化名称 英语名称 中文名称 国家地区 语言 流通币种 排序 id-id ...
- APP开发中这十个细节能直接影响到用户体验，那么如何提升用户体验？
随着软件开发技术的不断发展和完善,有众多同类选择的APP用户越来越挑剔,单单拼功能拼硬件已经不足以捕获用户芳心.在APP使用过程中,大部分用户无意识地培养出了对使用体验的重视感.这警醒企业,只盯着为用 ...
- 直播app开发中这几个功能影响后期运营
直播app开发中的常见功能我们都有所了解,但是对于功能的选择我们也会存在一定的瓶颈期,功能的出彩影响着后期运营的效果,所以把一些功能设计好是非常有必要的.今天就和南京软件开发公司软世通,一起来了解直播 ...
- APP开发中的UI设计
UI设计是 APP开发中一个必不可少的部分,用户体验也是影响 APP产品成功与否的重要因素,用户体验包括用户的使用感受和操作感受.就 UI设计来说,它的主要内容有:界面.图标.颜色.字体 ...
最新文章
- Infoview表单转换研究(infopath---aspx)
- Network 之一 国际标准组织介绍、互联网/因特网、以太网概念区分、协议标准
- 从人人网抓取高校数据信息，包括，省份 - 高校 - 院系 (提供最终SQL文件下载)...
- “富豪相亲大会”究竟迷失了什么？
- Springboot响应处理
- 久其报表大厅_天下苦“数”久矣，大数据分析平台解决物流数据孤岛
- Docker教程小白实操入门（20）--如何删除数据卷
- android google地图点聚合样式修改
- 信创终端违规外联案例分析及防控措施
- 主板usb接口全部失灵_usb接口没反应,主板usb接口全部失灵
- sklearn机器学习之分类决策树（泰坦尼克号幸存者数据集）
- RFX2401C 2.4GHz功放PA前端模块
- excel股票今日走势计算机,有没有可以在excel上自动显示股票实时数据的方法
- idea 链接github 无法成功登陆， SpringCloud Config 分布式配置中心配置
- java实现dwg转pdf
- 常用FPGA相关的网址资源
- 软件测试 - Linux的常用命令
- python爬虫爬取（中国空气质量在线监测分析平台）北京PM2.5，2013年至2018年的数据
- easy_yinkelude 简单的文件包含
- Web应用程序与桌面应用程序的区别