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

微信小程序开发交流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>

js

// 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
}