微信小程序选择图片控件


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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
vue项目实现多语言切换的思路
Sep 17 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 curl 伪造IP来源的实例代码
2012/11/01 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
Using the TextRange Object
2006/10/14 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
Vue3为什么这么快
2020/09/23 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Python常用小技巧总结
2015/06/01 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
自我评价中英文语句
2013/11/30 职场文书
小学家长评语大全
2014/04/16 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
外科护士长工作总结
2015/08/12 职场文书
初中班主任工作随笔
2015/08/15 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Python打包为exe详细教程
2021/05/18 Python