WeChat applet selects the image control

WeChat applet selects the image control

This article example shares the specific code for selecting the image control in the WeChat applet for your reference. The specific content is as follows

xml:

<loading hidden="{{loadingHidden}}">
 loading...
</loading>
<view class="add_carimg">
 <block>
 <view class="load_iamge">
 <text class="load_head_text">Upload photos of construction vehicles</text>
 <text class="load_foot_text">{{imgbox.length}}/2</text>
 </view>
 <view class='pages'>
 <view class="images_box">
 <block wx:key="imgbox" wx:for="{{imgbox}}">
  <view class='img-box'>
  <image class='img' src='{{item}}' data-message="{{item}}" bindtap="imgYu"></image>
  <view class='img-delect' data-deindex='{{index}}' bindtap='imgDelete1'>
  <image class='img' src='/pages/images/delete_btn.png'></image>
  </view>
  </view>
 </block>
 <view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<2}}">
  <image class='img' src='/pages/images/load_image.png'></image>
 </view>
 </view>
 </view>
 </block>
</view>
<view>
 <button class="work_btn" bindtap="shanggang">Go to work</button>
</view>

css:

.work_btn {
 width: 60%;
 height: 35px;
 line-height: 35px;
 margin-top: 15px;
 border-radius: 5px;
 font-size: 30rpx;
 color: white;
 background-color: rgb(2, 218, 247);
}
 
.work_btn:active {
 width: 60%;
 height: 35px;
 line-height: 35px;
 margin-top: 15px;
 border-radius: 5px;
 font-size: 30rpx;
 color: white;
 background-color: rgb(151, 222, 231);
}
 
/************/
 
.load_image {
 width: 100%;
 height: 30px;
 margin-top: 10px;
 display: flex;
 flex-direction: row;
}
 
.load_head_text {
 width: 95%;
 height: 20px;
 margin-bottom: 5px;
 margin-top: 5px;
 
 
}
 
.load_foot_text {
 width: 5%;
 height: 20px;
 margin-right: 15px;
 margin-top: 5px;
 margin-bottom: 5px;
 float: right;
 
}
 
.pages {
 width: 98%;
 margin: auto;
 overflow: hidden;
}
 
/* picture*/
.images_box {
 width: 100%;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: flex-start;
 background-color: white;
}
 
.img-box {
 border: 2rpx;
 border-style: solid;
 border-color: rgba(170, 167, 167, 0.452);
 width: 200rpx;
 height: 200rpx;
 margin-left: 35rpx;
 margin-top: 20rpx;
 margin-bottom: 20rpx;
 position: relative;
}
 
/* Delete the image */
.img-select {
 width: 50rpx;
 height: 50rpx;
 border-radius: 50%;
 position: absolute;
 right: -20rpx;
 top: -20rpx;
}
 
.img {
 width: 100%;
 height: 100%;
}

js:

Page({
 
 /**
 * Initial data of the page */
 data: {
 tempFilePaths: '',
 imgbox: [], //Select the image fileIDs: [], //Return value after uploading to cloud storage src: 0,
 },
 
 onLoad: function (options) {
 
 
 },
 //Image click event imgYu: function (event) {
 var that = this;
 
 console.log(event.target.dataset.message + "what is this");
 var src = event.target.dataset.message;
 //Image preview wx.previewImage({
 current: src, // The http link of the currently displayed image urls: [src] // The list of http links of images that need to be previewed})
 }, // Delete photo&&
 imgDelete1: function (e) {
 let that = this;
 let index = e.currentTarget.dataset.deindex;
 let imgbox = this.data.imgbox;
 imgbox.splice(index, 1)
 that.setData({
 imgbox:imgbox
 });
 },
 // Delete photo&&
 imgDelete1: function (e) {
 let that = this;
 let index = e.currentTarget.dataset.deindex;
 let imgbox = this.data.imgbox;
 imgbox.splice(index, 1)
 that.setData({
 imgbox:imgbox
 });
 },
 //Select an image&&&
 addPic1: function (e) {
 var imgbox = this.data.imgbox;
 console.log(imgbox)
 var that = this;
 var n = 2;
 if (2 > imgbox.length > 0) {
 n = 2 - imgbox.length;
 } else if (imgbox.length == 2) {
 n = 1;
 }
 wx.chooseImage({
 count: n, // default is 9, set the number of images sizeType: ['original', 'compressed'], // you can specify whether it is the original image or the compressed image, both are available by default sourceType: ['album', 'camera'], // you can specify whether the source is the album or the camera, both are available by default success: function (res) {
  // console.log(res.tempFilePaths)
  // Returns a list of local file paths for the selected photos. tempFilePath can be used as the src attribute of the img tag to display the image var tempFilePaths = res.tempFilePaths
  console.log('path' + tempFilePaths);
  if (imgbox.length == 0) {
  imgbox = tempFilePaths
  } else if (2 > imgbox.length) {
  imgbox = imgbox.concat(tempFilePaths);
  }
  that.setData({
  imgbox: imgbox,
  imgnum: imgbox.length
  });
 }
 })
 },
 
 //Picture imgbox: function (e) {
 this.setData({
 imgbox: e.detail.value
 })
 },
 
})

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • WeChat applet implements image selection and preview function
  • How to use the WeChat applet chooseImage (select an image from the local album or take a photo using the camera)
  • WeChat applet picture selection area cropping implementation method
  • WeChat applet selects pictures and enlarges the preview picture function
  • WeChat applet image selection, upload to server, preview (PHP) implementation example
  • WeChat applet chooseImage selects an image or takes a photo
  • WeChat Mini Program - Take a photo or select an image and upload a file

<<:  How to redirect nginx directory path

>>:  MySQL 5.7.13 winx64 installation and configuration method graphic tutorial (win10)

Recommend

mysql8.0.11 winx64 installation and configuration tutorial

The installation tutorial of mysql 8.0.11 winx64 ...

Vue globally introduces scss (mixin)

Table of contents 1. mixin.scss 2. Single file us...

How to implement Echats chart large screen adaptation

Table of contents describe accomplish The project...

Detailed steps for yum configuration of nginx reverse proxy

Part.0 Background The company's intranet serv...

How to implement on-demand import and global import in element-plus

Table of contents Import on demand: Global Import...

What is a MySQL index? Ask if you don't understand

Table of contents Overview From Binary Tree to B+...

How to install and deploy zabbix 5.0 for nginx

Table of contents Experimental environment Instal...

Explanation of the usage scenarios of sql and various nosql databases

SQL is the main trunk. Why do I understand it thi...

Graphic tutorial for installing MySQL 5.6.35 on Windows 10 64-bit

1. Download MySQL Community Server 5.6.35 Downloa...

Detailed tutorial on compiling and installing python3.6 on linux

1. First go to the official website https://www.p...

How to build sonarqube using docker

Table of contents 1. Install Docker 2. Install so...