Andriod app开发中身份信息验证模块，利用appcan实现照片的上传
来源：互联网 发布：搞笑淘宝店名 编辑：程序博客网 时间：2024/06/05 02:05
我觉着这代码应该没问题来着，总是不对。
望大家来找茬，我对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 onclick="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 onclick="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 0
- Andriod app开发中身份信息验证模块，利用appcan实现照片的上传
- App开发中利用Mob实现免费短信验证码
- appcan框架开发app
- SpringMVC上传照片到APP的方法
- 照片上传功能的实现
- 利用Nginx的上传模块和上传进度模块实现网页上传文件
- 利用Nginx的上传模块和上传进度模块实现网页上传文件
- 利用Nginx的上传模块和上传进度模块实现网页上传文件
- JavaWeb第三周-利用JS中正则表达式实现注册的信息验证。
- AppCan移动开发技巧：3步走，获取移动APP签名信息
- AppCan移动开发技巧：3步走，获取移动APP签名信息
- Android根据不同身份配置APP对应的不同模块
- Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙
- 验证上传图片的信息
- AppCan三步教你玩转APP开发
- AppCan认为，移动APP开发不是技术活
- Appcan+vue+vux+webpack开发app(原创)
- JavaScript实现上传照片前的预览
- Android ASDL进程通信
- MongoDB 简单操作
- mysql解压版安装
- mysql分表和表分区详解
- Android--Google官方下拉刷新SwipeRefreshLayout（附加增加上拉加载）
- Andriod app开发中身份信息验证模块，利用appcan实现照片的上传
- 快速排序
- EasyUI 学习笔记(一)
- Java中Synchronized的用法
- 10条PHP高级技巧
- java服务安装(一)：使用java service wrapper及maven打zip包
- MD5加密算法的java实现
- hdu_4897_Little Devil I(树链剖分)
- 浏览器 user-agent 字符串的故事
