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

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

浏览量:1821 时间: 来源:a_靖

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

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

2.效果图:

3.完整代码:

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

4.js

//pages/register/register3/register3.jsconstapp=getApp()constutil=require("../../../utils/util.js")vari;varimage_belong;varonly_num;varform_data;varpsw_vaule=[];Page({data:{tempFilePaths:[],percent:0,in_percent:false},img_item:function(e){varthat=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){varthat=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!=''){varnum=0;for(vara=0;athat.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){varthat=this;switch(i){case0:image_belong='headimage'break;case1:image_belong='idcard_positive'break;case2:image_belong='idcars_reverse'break;case3:image_belong='driver_license'break;case4:image_belong='driving_this'break;}vardata=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:'提交失败,请重新提交!',})}})}elseif(ithat.data.tempFilePaths.length){//若图片还没有传完,则继续调用函数that.btn_up()}}})},onLoad:function(options){},onShow:function(){only_num='jt'+Math.round(newDate()/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}})

5.css

/*pages/register/register3/register3.wxss*/page{font-size:32rpx;}.headimage{margin:0auto;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:35rpx15rpx;border:1pxsolid#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:1pxsolid#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}

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎