微信小程序选择图片控件


Posted in Javascript onJanuary 19, 2021

本文实例为大家分享了微信小程序选择图片控件的具体代码,供大家参考,具体内容如下

微信小程序选择图片控件

xml:

<loading hidden="{{loadingHidden}}">
 加载中...
</loading>
<view class="add_carimg">
 <block>
 <view class="load_iamge">
 <text class="load_head_text">上传施工车辆照片</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">上岗</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_iamge {
 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;
}
 
/* 图片 */
.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;
}
 
/* 删除图片 */
.img-delect {
 width: 50rpx;
 height: 50rpx;
 border-radius: 50%;
 position: absolute;
 right: -20rpx;
 top: -20rpx;
}
 
.img {
 width: 100%;
 height: 100%;
}

js:

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 tempFilePaths: '',
 imgbox: [], //选择图片
 fileIDs: [], //上传云存储后的返回值
 src: 0,
 },
 
 onLoad: function (options) {
 
 
 },
 //图片点击事件
 imgYu: function (event) {
 var that = this;
 
 console.log(event.target.dataset.message + "这是啥");
 var src = event.target.dataset.message;
 //图片预览
 wx.previewImage({
 current: src, // 当前显示图片的http链接
 urls: [src] // 需要预览的图片http链接列表
 })
 }, // 删除照片 &&
 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
 });
 },
 // 删除照片 &&
 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
 });
 },
 // 选择图片 &&&
 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, // 默认9,设置图片张数
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function (res) {
  // console.log(res.tempFilePaths)
  // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  var tempFilePaths = res.tempFilePaths
  console.log('路径' + tempFilePaths);
  if (imgbox.length == 0) {
  imgbox = tempFilePaths
  } else if (2 > imgbox.length) {
  imgbox = imgbox.concat(tempFilePaths);
  }
  that.setData({
  imgbox: imgbox,
  imgnum: imgbox.length
  });
 }
 })
 },
 
 //图片
 imgbox: function (e) {
 this.setData({
 imgbox: e.detail.value
 })
 },
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
jQuery冲突问题解决方法
Jan 19 #jQuery
js实现随机点名
Jan 19 #Javascript
js实现有趣的倒计时效果
Jan 19 #Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 #Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 #Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 #Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
You might like
在PHP中使用XML
2006/10/09 PHP
php的计数器程序
2006/10/09 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
深入理解JavaScript的async/await
2018/08/05 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
新闻专业毕业生英文求职信
2014/03/19 职场文书
庆六一活动总结
2014/08/29 职场文书
爱国主义电影观后感
2015/06/18 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
Python基础之Socket通信原理
2021/04/22 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android