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:
|
<<: How to redirect nginx directory path
>>: MySQL 5.7.13 winx64 installation and configuration method graphic tutorial (win10)
Preface Crond is a scheduled execution tool under...
Crontab is a command used to set up periodic exec...
Table of contents Basic instructions and usage An...
Real-time replication is the most important way t...
Today, when I was using Nginx, a 500 error occurr...
use Flexible boxes play a vital role in front-end...
Table of contents Use of this.$set in Vue use Why...
Slow query log related parameters MySQL slow quer...
Table of contents 1. What are microtasks? 2. What...
Preface If we want to achieve the effect of onlin...
I am using the Ubuntu 16.04 system here. Installa...
Table of contents Introduction to utf8mb4 UTF8 by...
If your DOCTYPE is as follows: Copy code The code ...
1. Commonly used high-order functions of arrays S...
OBS studio is cool, but JavaScript is cooler. Now...