移动端拍照上传到服务器

一、html代码如下

<form id="myFormData" class="mui-input-group"><div class="mui-input-row"><label class="inp-label">真实姓名</label><input type="text" id="senderName" class="mui-input-clear" placeholder="输入真实姓名(与身份证一致)" value=""></div><div class="mui-input-row"><label class="inp-label">证件号码</label><input type="number" id="senderIdCard" class="mui-input-clear" placeholder="输入身份证号码" value=""></div><div class="mui-input-row"><label class="inp-label">银行卡号</label><input type="number" id="cardNum" class="mui-input-clear" placeholder="输入绑定银行卡号" value=""></div><div class="mui-input-row uploadImg"><img src="../../../images/menu/camera.png" alt="1" id="IdCardFront" /></div><div class="subtitle">身份证人像页</div><div class="mui-input-row uploadImg" id="IdCardFront"><img src="../../../images/menu/camera.png" alt="2" id="IdCardBack" /></div><div class="subtitle">身份证国徽页</div><div class="mui-input-row uploadImg" id="IdCardFront"><img src="../../../images/menu/camera.png" alt="3" id="manIdCard" /></div><div class="subtitle">手持身份证半身照</div><div id="chooseVehicle"><h4 class="title">注册交通工具类型</h4><div class="mui-input-row mui-radio mui-radio-vehicle mui-left"><label>电瓶车</label><input name="radio" value="ELECTRIC_BICYCLE" type="radio" checked class="vehicleIndex"></div><div class="mui-input-row mui-radio mui-radio-vehicle mui-left"><label>机动三轮车</label><input name="radio" value="MOBILE_TRICYCLE" type="radio" class="vehicleIndex"></div><div class="mui-input-row mui-radio mui-radio-vehicle mui-left"><label>小型汽车</label><input name="radio" value="CAR" type="radio" class="vehicleIndex"></div><div class="mui-input-row mui-radio mui-radio-vehicle mui-left"><label>面包车</label><input name="radio" value="VAN" type="radio" class="vehicleIndex"></div><div class="mui-input-row mui-radio mui-radio-vehicle mui-left"><label>小型货车</label><input name="radio" value="TRUCK" type="radio" class="vehicleIndex"></div><div class="mui-input-row mui-radio mui-radio-vehicle mui-left"><label>中型货车</label><input name="radio" value="MIDDLE_TRUCK" type="radio" class="vehicleIndex"></div></div><div class="list-operation-rob clear"><button id="submit" type="button" class="mui-btn mui-btn-primary">提交认证</button></div>
</form>

二、js代码如下

<script type="text/javascript">mui.init();mui.plusReady(function() {plus.navigator.setStatusBarStyle('dark'); //标题栏 字体前景色light})var fileArr = new Array(3);var dataArr = {};var senderName = document.getElementById("senderName"); //姓名var senderIdCard = document.getElementById("senderIdCard"); //身份证号var cardNum = document.getElementById("cardNum"); //银行卡号var IdCardFront = document.getElementById("IdCardFront"); //点击身份证人像页var IdCardBack = document.getElementById("IdCardBack"); //点击身份证国徽也var manIdCard = document.getElementById("manIdCard"); //点击人手持身份证var submitBtn = document.getElementById("submit"); //认证提交var chooseVehicle = "ELECTRIC_BICYCLE"; //默认第一个 电动车/*** 上传对应的相片 getImage* 身份证正面 IdCardFront* 身份证反面 IdCardBack* 手持身份证半身照 manIdCard*/IdCardFront.addEventListener('tap', function(e) {getImage(IdCardFront, 0);})IdCardBack.addEventListener('tap', function(e) {getImage(IdCardBack, 1);})manIdCard.addEventListener('tap', function(e) {getImage(manIdCard, 2);})/*** 选择交通工具*/mui("#chooseVehicle").on('tap', '.mui-radio-vehicle', function(e) {chooseVehicle = this.getElementsByClassName("vehicleIndex")[0].value || null;console.log(chooseVehicle);}, true)/*** 提交认证* post fomedata*/submitBtn.addEventListener("tap", function() {dataArr = {"name": senderName.value,"idCard": senderIdCard.value,"bankCard": cardNum.value,"idFront": IdCardFront.src.split("camera/")[1],"idBack": IdCardBack.src.split("camera/")[1],"handHold": manIdCard.src.split("camera/")[1],"vehicle": chooseVehicle}console.log(JSON.stringify(dataArr));/*** 验证*/if(!dataArr.name) {return plus.nativeUI.toast("请先输入姓名");} else if(!dataArr.idCard) {return plus.nativeUI.toast("请先输入身份证号");} else if(!dataArr.bankCard) {return plus.nativeUI.toast("请先输入银行卡号号");} else if(!dataArr.idFront) {return plus.nativeUI.toast("请先上传身份证人像页");} else if(!dataArr.idBack) {return plus.nativeUI.toast("请先上传身份证国徽页");} else if(!dataArr.handHold) {return plus.nativeUI.toast("请先上传手持身份证页");} else {/*** 开始创建上传任务*/upLoadTask();}})/*** 拍照并显示* @param {Object} id 显示照片的document* @param {Object} numbers 显示照片的索引*/function getImage(id, numbers) {//获取摄像头管理对象var c = plus.camera.getCamera();//拍照操作c.captureImage(function(e) {plus.io.resolveLocalFileSystemURL(e, function(entry) {var s = entry.toLocalURL(); //拿到图片路径    id.src = s;setFile(s, numbers);}, function(e) {console.log("读取拍照文件错误：" + e.message);});}, function(s) {console.log("error" + s);}, {filename: "_doc/camera/"})}/*** 获取到图片文件* @param {Object} fileSrc*/function setFile(fileSrc, numbers) {var image = new Image();image.src = fileSrc;fileArr[numbers] = image;//fileArr.push(image);console.log("拍照后文件:");console.log(JSON.stringify(fileArr));}/*** 创建上传任务*/function upLoadTask() {var files = fileArr;//存放图片var wt = plus.nativeUI.showWaiting(); //打开等待旋转提示按钮    var task = plus.uploader.createUpload(server, {method: "POST"}, function(t, status) { //上传完成wt.close(); //关闭等待提示按钮if(status == 200) {var res = t.responseText;var types = typeof(res);if(types == "string") {res = JSON.parse(res);}if(res.status == 1) {console.log("上传成功：" + t.responseText);app.errorMessages("提交认证成功,请等待审核..");setTimeout(function() {mui.back();}, 500)//getVerifyStatus(); //获取认证状态} else {if(res.msg == "你已经通过机器认证!") {app.errorMessages("您已经申请认证过了!");setTimeout(function() {mui.back();}, 500)} else {app.errorMessages(res.msg)}}} else {     app.errorMessages("认证上传失败!" + status);}        });  //添加图片到队列task.addFile(files[0].src, {key: "idFront"});task.addFile(files[1].src, {key: "idBack"}); task.addFile(files[2].src, {key: "handHold"}); //添加文本数据到对列task.addData("name", dataArr.name);task.addData("idCard", dataArr.idCard);task.addData("bankCard", dataArr.bankCard);task.addData("vehicle", dataArr.vehicle);task.setRequestHeader('Authorization', "Bearer " + app.getToken());task.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//开始上传task.start();}//页面后退var oldBack = mui.back;mui.back = function() {var refreshPageStatus = plus.webview.getWebviewById("index_webview_push"); //返回前刷新上个页面订单状态if(refreshPageStatus) {refreshPageStatus.reload(true);}oldBack();};
</script>

移动端拍照上传到服务器相关推荐

ios 拍照上传到服务器_ios端浏览器拍照上传到服务器，图片被旋转90度 php 解决方案...
1.可以通过前端进行解决,本案例通过后端解决的判断请求的浏览器的ua,如果是ios浏览器则进行90度旋转重点来了: 必须确保检测的图片是ios设备上传的完整图片,不要在前端压缩过的,因为压缩后的图 ...
webAPP如何实现移动端拍照上传（Vue组件示例）？
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下"一套代码多处运行",一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然 ...
安卓拍照上传php服务器,Android拍照上传至PHP服务器并写入MySql数据库(下)
Android实现调用系统相机,拍照: Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); getFileUri(); inte ...
微信小程序：从本地相册选择图片、相机拍照，并将所选图片上传到服务器
简介小程序项目中有个需求:用户聊天时可以上传图片,还能支持拍照.于是学习了一下,分享给大家. 微信小程序中有个wx.chooseImage的方法可以快捷调用达到需求的效果. 具体实现 1.为了简化代 ...
html5摄像头拍照保存图片,[转载]HTML5在线摄像头拍照上传并保存到服务器的应用...
1.//读取视频流 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; if (navig ...
html访问手机相册,使用HTML5的FileReader读取手机图片(还可选择拍照), 并自动异步上传到服务器上...
使用html5 FileReader获取图片,并异步上传到服务器(not iframe) body{margin: 0px; background:#f2f2f0;} p{margin:0px;} . ...
html5+php调用android手机图片,HTML5拍照上传图片Phonegap封装HTML5调用Android相机拍照上传到PHP端...
HTML5拍照: 参考网址:http://blog.csdn.net/hfahe/article/details/7354912 上传部分也可以用ajax: $.ajax({ url: 'http:/ ...
HTML5 实现手机拍照上传
2019独角兽企业重金招聘Python工程师标准>>> 背景:移动端H5项目,需要实现调用手机拍照,并将图片压缩上传功能. 页面样式: 上传图片有原生的方法<input typ ...
swift文件服务器,Swift3一行代码将各种类型文件上传到服务器
由于之前一直在忙项目,很久没有写过一篇像样的文章了,现在手上的项目基本是完成了,正好工作时间偷个懒写两篇文章. 将相机或相册图片上传到服务器先看看最常见的图片上传,也可以选择跳过,后面有直接的封装方 ...

移动端拍照上传到服务器

移动端拍照上传到服务器相关推荐

最新文章

热门文章