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

How to create scheduled tasks using crond tool in Linux

Preface Crond is a scheduled execution tool under...

Detailed explanation of the use and precautions of crontab under Linux

Crontab is a command used to set up periodic exec...

Implementation of Element-ui Layout (Row and Col components)

Table of contents Basic instructions and usage An...

Detailed explanation of Linux inotify real-time backup implementation method

Real-time replication is the most important way t...

Solution to Nginx 500 Internal Server Error

Today, when I was using Nginx, a 500 error occurr...

Detailed explanation of CSS3 elastic expansion box

use Flexible boxes play a vital role in front-end...

Detailed explanation of the use of this.$set in Vue

Table of contents Use of this.$set in Vue use Why...

Basic usage tutorial of MySQL slow query log

Slow query log related parameters MySQL slow quer...

Details on macrotasks and microtasks in JavaScript

Table of contents 1. What are microtasks? 2. What...

Vue codemirror realizes the effect of online code compiler

Preface If we want to achieve the effect of onlin...

How to install phabricator using Docker

I am using the Ubuntu 16.04 system here. Installa...

How to support full Unicode in MySQL/MariaDB

Table of contents Introduction to utf8mb4 UTF8 by...

Abbreviation of HTML DOCTYPE

If your DOCTYPE is as follows: Copy code The code ...

Vue commonly used high-order functions and comprehensive examples

1. Commonly used high-order functions of arrays S...

Create a screen recording function with JS

OBS studio is cool, but JavaScript is cooler. Now...