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

小柳888
146 阅读4分钟 
转载自 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. }


\

avatar
文章
阅读
粉丝