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

转载自 https://blog.csdn.net/qq_35713752/article/details/78975877

1. <view class='top'>
2. <view>注 册 须 知 : </view>
3. </view>
4. <view>
5. <view class='form'>
6. <view class='hint'>标☆号为必填项 </view>
7. <form bindsubmit="formSubmit" bindreset="formReset">
8. 头 像 上 传 ☆ <image wx:if="{{tempFilePaths[0] ==='undefined'}}" class='headimage' bindtap='img_item' id='0' name='headimage'> </image>
9. <image wx:else src="{{tempFilePaths[0]}}" class='headimage' bindtap='img_item' id='0' name='headimage'> </image>
10. <view class='view1' > <view class='view'>姓 名 ☆ </view> <input type='text' name="name"> </input> </view>
11. <view class='view1' > <view class='view'>性 别 ☆ </view> <input type='text' name="sex"> </input> </view>
12. <view class='view1' > <view class='view'>登录账号 ☆ </view> <input type='text' name="account"> </input> </view>
13. <view class='view1' > <view class='view'>登录密码 ☆ </view> <input type='text' bindinput='psw_1' name="psw"> </input> </view>
14. <view class='view1' > <view class='view'>确认密码 ☆ </view> <input type='text' bindinput='psw_2' name="psw"> </input> </view>
15. <view class='view1' > <view class='view'>身份证号 ☆ </view> <input type='text' name="certificate_num"> </input> </view>
16. <view class='view1' > <view class='view'>车牌号码 ☆ </view> <input type='text' name="car_num"> </input> </view>
17. <view class='view1' > <view class='view'>手机号码 ☆ </view> <input type='text' name="linktel"> </input> </view>
18. <!-- <view class='view1' ><view class='view'>驾照代号 ☆ </view><input type='text' name=""></input></view> -->
19. <view class='view'>身份证正面 ☆ </view>
20. <image class='img' wx:if="{{!tempFilePaths[1]}}" bindtap='img_item' id='1' name='idcard_positive' src='../../../image/jia.png'> </image>
21. <image class='img' wx:else bindtap='img_item' id='1' name='idcard_positive' src='{{tempFilePaths[1]}}'> </image>
22. <view class='view'>身份证反面 ☆ </view>
23. <image class='img' wx:if="{{!tempFilePaths[2]}}" bindtap='img_item' id='2' name='idcars_reverse' src='../../../image/jia.png'> </image>
24. <image class='img' wx:else bindtap='img_item' id='2' name='idcard_positive' src='{{tempFilePaths[2]}}'> </image>
25. <view class='view'>行驶本 ☆ </view>
26. <image class='img' wx:if="{{!tempFilePaths[3]}}" bindtap='img_item' id='3' name='driver_license' src='../../../image/jia.png'> </image>
27. <image class='img' wx:else bindtap='img_item' id='3' name='idcard_positive' src='{{tempFilePaths[3]}}'> </image>
28. <view class='view'>驾驶证 ☆ </view>
29. <image class='img' wx:if="{{!tempFilePaths[4]}}" bindtap='img_item' id='4' name='driving_this' src='../../../image/jia.png'> </image>
30. <image class='img' wx:else bindtap='img_item' id='4' name='idcard_positive' src='{{tempFilePaths[4]}}'> </image>
31. <view class='xiahuaxian'> </view>
32. <progress percent="{{percent}}" wx:if="{{in_percent}}" show-info />
33. <button formType="submit">提交审核 </button>
34. </form>
35. </view>
36. </view>

js

1. // pages/register/register3/register3.js
2. const app = getApp()
3. const util = require( "../../../utils/util.js")
4. var i;
5. var image_belong;
6. var only_num;
7. var form_data;
8. var psw_vaule=[];
9. Page({
10. data: {
11. tempFilePaths: [],
12. percent: 0,
13. in_percent: false
14. },
15. img_item: function (e) {
16. var that = this;
17. wx.chooseImage({
18. count: 1,
19. sizeType: [ 'original', 'compressed'],
20. sourceType: [ 'album', 'camera'],
21. success: function (res) {
22. that.setData({
23. [ 'tempFilePaths[' + e.target.id + ']']: res.tempFilePaths[ 0]
24. })
25. }
26. })
27. },
28. //POST
29. formSubmit: function (e) {
30. var that = this;
31. form_data = e.detail.value;
32. if (psw_vaule[ 0] === psw_vaule[ 1]) {
33. if (e.detail.value.name != '' && e.detail.value.account != '' && e.detail.value.psw != '' && e.detail.value.linktel != '' && e.detail.value.car_num != '') {
34. var num = 0;
35. for ( var a = 0; a < that.data.tempFilePaths.length; a++) {
36. if (that.data.tempFilePaths[a] === null) {
37. wx.showToast({
38. title: '请填写完整···',
39. })
40. } else {
41. num++
42. if (num === 5) {
43. that.btn_up()
44. }
45. }
46. }
47. } else {
48. wx.showToast({
49. title: '请填写完整···',
50. })
51. }
52. } else {
53. wx.showToast({
54. title: '密码重复···',
55. })
57. }
58. },
59. btn_up: function (e) {
60. var that = this;
61. switch (i) {
62. case 0:
63. image_belong = 'headimage'
64. break;
65. case 1:
66. image_belong = 'idcard_positive'
67. break;
68. case 2:
69. image_belong = 'idcars_reverse'
70. break;
71. case 3:
72. image_belong = 'driver_license'
73. break;
74. case 4:
75. image_belong = 'driving_this'
76. break;
77. }
78. var data = form_data
79. data.openid = app._openid
80. data.program_id = app.jtappid
81. data.state = 1
82. data.only_num = only_num
83. data.image_belong = image_belong
84. wx.uploadFile({
85. url: '/register_1',
86. filePath: that.data.tempFilePaths[i],
87. name: 'image',
88. formData: data,
89. success: function (res) {
90. console.log(image_belong)
91. i++
92. that.setData({
93. percent: that.data.percent + 20,
94. in_percent: true
95. })
96. if (i == that.data.tempFilePaths.length) {
97. util.request( '/temp_info', 'get', { 'only_num': only_num }, '正在加载数据', function (res) {
98. console.log( 2)
99. if (res.data.state == 1) {
100. wx.showModal({
101. title: '提示',
102. content: '提交成功!',
103. success: function (res) {
104. that.setData({
105. in_percent: false
106. })
107. that.onLoad()
108. wx.navigateBack({
109. delta: 2
110. })
111. }
112. })
113. } else {
114. wx.showModal({
115. title: '提示',
116. content: '提交失败,请重新提交!',
117. })
118. }
119. })
120. } else if (i < that.data.tempFilePaths.length) { //若图片还没有传完，则继续调用函数
121. that.btn_up()
122. }
123. }
124. })
125. },
126. onLoad: function (options) {
128. },
129. onShow: function () {
130. only_num = 'jt' + Math.round( new Date() / 1000);
131. i = 0
132. },
133. onReachBottom: function (e) {
134. console.log(e)
135. },
136. onShareAppMessage: function () {
138. },
139. psw_1: function (e) {
140. psw_vaule[ 0] = e.detail.value
141. },
142. psw_2: function (e) {
143. psw_vaule[ 1] = e.detail.value
144. }
145. })

css

1. /* pages/register/register3/register3.wxss */
2. page{
3. font-size: 32rpx;
4. }
5. .headimage{
6. margin: 0 auto;
7. height: 150rpx;
8. width: 150rpx;
9. display: block;
10. margin-bottom: 50rpx;
11. border-radius: 50%;
12. background: red
13. }
14. .top{
15. border-radius: 15rpx;
16. background: #F7B45D;
17. height: 200rpx;
18. margin: 15rpx;
19. color: white;
20. padding: 20rpx;
21. }
22. .form{
23. margin: 35rpx 15rpx;
24. border: 1px solid #F7B45D;
25. border-radius: 15rpx;
26. padding: 15rpx;
27. color: #F7B45D;
28. margin-bottom: 30rpx
29. }
30. .form .view{
31. display: inline-block;
32. width: 220rpx;
33. position: relative;
34. bottom: 10rpx
35. }
36. .view1{
37. margin-bottom: 20rpx;
38. }
39. .hint{
40. position: relative;
41. left: 40rpx;
42. top: - 35rpx;
43. background: white;
44. width: 230rpx;
45. }
46. input{
47. border: 1px solid #F7B45D;
48. height: 30rpx;
49. padding-left: 20rpx;
50. border-radius: 15rpx;
51. display: inline-block;
52. }
53. .img{
54. height: 220rpx;
55. display: block;
56. margin-left: 120rpx;
57. width: 360rpx;
58. }
59. .xiahuaxian{
60. width: 100%;
61. height: 3px;
62. background: #F7B45D;
63. margin-top: 100rpx;
64. }
65. button{
66. width: 320rpx;
67. height: 60rpx;
68. font-size: 25rpx;
69. line-height: 60rpx;
70. margin-top: 50rpx;
71. margin-bottom: 80rpx;
72. background: #F7B45D;
73. color: white
74. }