微信小程序多张图片和表单一起上传，验证表单及进度条的实现完整代码

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

效果图：

完整代码:

<!--pages/register/register.wxml-->
<view class='top'>
<view>注 册 须 知 : </view>
</view>
<view>
<view class='form'>
<view class='hint'>标☆号为必填项</view><form  bindsubmit="formSubmit" bindreset="formReset">头 像  上 传 ☆ <image wx:if="{{tempFilePaths[0] ==='undefined'}}" class='headimage' bindtap='img_item' id='0' name='headimage'></image><image wx:else src="{{tempFilePaths[0]}}" class='headimage' bindtap='img_item' id='0' name='headimage'></image><view class='view1' ><view class='view'>姓 名  ☆ </view><input type='text' name="name"></input></view><view class='view1' ><view class='view'>性  别  ☆ </view><input type='text' name="sex"></input></view><view class='view1' ><view class='view'>登录账号 ☆ </view><input type='text' name="account"></input></view><view class='view1' ><view class='view'>登录密码 ☆ </view><input type='text' bindinput='psw_1' name="psw"></input></view><view class='view1' ><view class='view'>确认密码 ☆ </view><input type='text' bindinput='psw_2' name="psw"></input></view><view class='view1' ><view class='view'>身份证号 ☆ </view><input type='text' name="certificate_num"></input></view><view class='view1' ><view class='view'>车牌号码 ☆ </view><input type='text' name="car_num"></input></view><view class='view1' ><view class='view'>手机号码 ☆ </view><input type='text' name="linktel"></input></view><!-- <view class='view1' ><view class='view'>驾照代号 ☆ </view><input type='text' name=""></input></view> --><view class='view'>身份证正面 ☆ </view><image class='img' wx:if="{{!tempFilePaths[1]}}" bindtap='img_item' id='1' name='idcard_positive' src='../../../image/jia.png'></image><image class='img' wx:else bindtap='img_item' id='1' name='idcard_positive' src='{{tempFilePaths[1]}}'></image><view class='view'>身份证反面 ☆ </view><image class='img' wx:if="{{!tempFilePaths[2]}}" bindtap='img_item' id='2' name='idcars_reverse' src='../../../image/jia.png'></image><image class='img' wx:else bindtap='img_item' id='2' name='idcard_positive' src='{{tempFilePaths[2]}}'></image><view class='view'>行驶本 ☆ </view><image class='img' wx:if="{{!tempFilePaths[3]}}" bindtap='img_item' id='3' name='driver_license' src='../../../image/jia.png'></image><image class='img' wx:else bindtap='img_item' id='3' name='idcard_positive' src='{{tempFilePaths[3]}}'></image><view class='view'>驾驶证 ☆ </view><image class='img' wx:if="{{!tempFilePaths[4]}}" bindtap='img_item' id='4' name='driving_this' src='../../../image/jia.png'></image><image class='img' wx:else bindtap='img_item' id='4' name='idcard_positive' src='{{tempFilePaths[4]}}'></image><view class='xiahuaxian'></view><progress percent="{{percent}}" wx:if="{{in_percent}}" show-info /><button formType="submit">提交审核</button></form>
</view>
</view>

// pages/register/register3/register3.js
const app = getApp()
const util = require("../../../utils/util.js")
var i;
var image_belong;
var only_num;
var form_data;
var psw_vaule=[];
Page({data: {tempFilePaths: [],percent: 0,in_percent: false},img_item: function (e) {var that = this;wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: function (res) {that.setData({['tempFilePaths[' + e.target.id + ']']: res.tempFilePaths[0]})}})},//POSTformSubmit: function (e) {var that = this;form_data = e.detail.value;if (psw_vaule[0] === psw_vaule[1]) {if (e.detail.value.name != '' && e.detail.value.account != '' && e.detail.value.psw != '' && e.detail.value.linktel != '' && e.detail.value.car_num != '') {var num = 0;for (var a = 0; a < that.data.tempFilePaths.length; a++) {if (that.data.tempFilePaths[a] === null) {wx.showToast({title: '请填写完整···',})} else {num++if (num === 5) {that.btn_up()}}}} else {wx.showToast({title: '请填写完整···',})}} else {wx.showToast({title: '密码重复···',})}},btn_up: function (e) {var that = this;switch (i) {case 0:image_belong = 'headimage'break;case 1:image_belong = 'idcard_positive'break;case 2:image_belong = 'idcars_reverse'break;case 3:image_belong = 'driver_license'break;case 4:image_belong = 'driving_this'break;}var data = form_datadata.openid = app._openiddata.program_id = app.jtappiddata.state = 1data.only_num = only_numdata.image_belong = image_belongwx.uploadFile({url: '/register_1',filePath: that.data.tempFilePaths[i],name: 'image',formData: data,success: function (res) {console.log(image_belong)i++that.setData({percent: that.data.percent + 20,in_percent: true})if (i == that.data.tempFilePaths.length) {util.request('/temp_info', 'get', { 'only_num': only_num }, '正在加载数据', function (res) {console.log(2)if (res.data.state == 1) {wx.showModal({title: '提示',content: '提交成功!',success: function (res) {that.setData({in_percent: false})that.onLoad()wx.navigateBack({delta: 2})}})} else {wx.showModal({title: '提示',content: '提交失败,请重新提交!',})}})} else if (i < that.data.tempFilePaths.length) {//若图片还没有传完，则继续调用函数that.btn_up()}}})},onLoad: function (options) {},onShow: function () {only_num = 'jt' + Math.round(new Date() / 1000);i = 0},onReachBottom: function (e) {console.log(e)},onShareAppMessage: function () {},psw_1: function (e) {psw_vaule[0] = e.detail.value},psw_2: function (e) {psw_vaule[1] = e.detail.value}
})

css

/* pages/register/register3/register3.wxss */
page{font-size: 32rpx;
}
.headimage{margin:0 auto;height: 150rpx;width: 150rpx;display: block;margin-bottom: 50rpx;border-radius: 50%;background: red
}
.top{border-radius: 15rpx;background: #F7B45D;height: 200rpx;margin: 15rpx;color: white;padding: 20rpx;
}
.form{margin: 35rpx 15rpx;border:1px solid #F7B45D;border-radius: 15rpx;padding: 15rpx;color: #F7B45D;margin-bottom: 30rpx
}
.form .view{display: inline-block;width: 220rpx;position: relative;bottom: 10rpx
}
.view1{margin-bottom: 20rpx;
}
.hint{position: relative;left: 40rpx;top: -35rpx;background: white;width: 230rpx;
}
input{border:1px solid #F7B45D;height: 30rpx;padding-left: 20rpx;border-radius: 15rpx;display: inline-block;
}
.img{height: 220rpx;display: block;margin-left: 120rpx;width: 360rpx;
}
.xiahuaxian{width: 100%;height: 3px;background: #F7B45D;margin-top: 100rpx;
}
button{width: 320rpx;height: 60rpx;font-size: 25rpx;line-height: 60rpx;margin-top: 50rpx;margin-bottom: 80rpx;background: #F7B45D;color: white
}

微信小程序多张图片和表单一起上传，验证表单及进度条的实现完整代码相关推荐

微信小程序之使用vant-3组件Uploader文件上传
效果图: 微信小程序之使用vant-3组件Uploader文件上传 1.把vant的weapp包加进来 2.在app.json文件里面"usingComponents"加载进来才能 ...
微信小程序（一）：霍兰德职业兴趣测试、心里测评、性格测评（含可用完整代码）
这段时间因为帮忙做一下高考填报方面公众号的维护,所以产生了做一个兴趣职业测评的微信小程序用来测试高考生的职业兴趣. 下面就让我们看一下具体的操作流程: 选好图片素材在网上找到霍兰德的新版题库打开微 ...
uniapp微信小程序老预览失败，或者上传失败（已解决）
uniapp微信小程序提示报错老是提示超过了2M 但是我改完之后还是提示超过2M的错误 message:Error: 系统错误,错误码:80058,preloadRule [pages/index ...
微信小程序实现录音格式为mp3，并上传到云开发环境
前言微信小程序中可以实现录音的主要有wx.startRecord()和wx.getRecorderManager(),其中wx.startRecord()从微信开发者工具基础库1.6后停止维护,开始 ...
C# 做微信小程序后台，基本服务器配置以及图片上传
最近参加腾讯的高校微信小程序大赛,用C#做过几个网站,便用C#做后台写接口,在操作的过程中遇到了很多问题.由于C#的生态(C#是最好的语言,不接受反驳),网上资料很少,一边摸索着一边写,还是很艰难的, ...
《微信小程序案例6》点击图片上传，从本地相册选择或打开摄像头拍摄上传照片
点击一下相机图片实现上传本都相册图片或者打开摄像头拍照上传使用微信小程序API里面的wx.chooseImage 实现点击并上传图片后把上传的图片放入上面的虚线框里面. 方法: 在wx.choose ...
微信小程序 - 超详细 “纯前端“ 将文件上传到阿里云 OSS，最新阿里云 OSS 直传音视频、图片、word、excel、ppt、office 文档（全程无需后端，前端文件直传阿里云oss服务器）
前言网上的教程乱七八糟却文件少代码(并且没注释),而且都已经很老了,对于新手来说真的无从下手. 本文站在新手小白的角度,实现微信小程序开发中,"前端直传" 上传文件到阿里云oss ...
微信小程序之图片、音频、视频上传（附前后端代码示例）
最近搞小程序开发,碰到了图片上传和音视频上传的问题,百度了下,网上示例不多,鄙人不才,就用TP3.2.3自己写了一个小程序上传图片.音视频的示例,刚好也是项目所需.能力有限,不喜勿喷,仅供新手参考. ...
微信小程序开发之——录音播放及文件上传下载-理论(1)
一概述小程序录制音频相关的API--recorderManager 小程序播放音频相关的API--InnerAudioContext 文件的上传相关API--wx.uploadFile 文件的下载 ...

微信小程序多张图片和表单一起上传，验证表单及进度条的实现完整代码

承接微信小程序开发。扫码加微信。

正文：

微信小程序多张图片和表单一起上传，验证表单及进度条的实现完整代码相关推荐

最新文章

热门文章