微信小程序实现图片上传放大预览删除代码


Posted in Javascript onJune 28, 2020

本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下

效果:

微信小程序实现图片上传放大预览删除代码

image.js代码:

Page({
 //选择相册或拍照
 data: {
 imgs: []
 },
//上传图片
 chooseImg: function (e) {
 var that = this;
 var imgs = this.data.imgs;
 if (imgs.length >= 9) {
  this.setData({
  lenMore: 1
  });
  setTimeout(function () {
  that.setData({
   lenMore: 0
  });
  }, 2500);
  return false;
 }
 wx.chooseImage({
  // count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  success: function (res) {
  // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  var tempFilePaths = res.tempFilePaths;
  var imgs = that.data.imgs;
  // console.log(tempFilePaths + '----');
  for (var i = 0; i < tempFilePaths.length; i++) {
   if (imgs.length >= 9) {
   that.setData({
    imgs: imgs
   });
   return false;
   } else {
   imgs.push(tempFilePaths[i]);
   }
  }
  // console.log(imgs);
  that.setData({
   imgs: imgs
  });
  }
 });
 },
 // 删除图片
 deleteImg: function (e) {
 var that = this;
 var imgs = that.data.imgs;
 var index = e.currentTarget.dataset.index;//获取当前长按图片下标
 wx.showModal({
  title: '提示',
  content: '确定要删除此图片吗?',
  success: function (res) {
  if (res.confirm) {
   console.log('点击确定了');
   imgs.splice(index, 1);
  } else if (res.cancel) {
   console.log('点击取消了');
   return false;
  }
  that.setData({
   imgs: imgs
  });
  }
 })
 },
 // 预览图片
 previewImg: function (e) {
  //获取当前图片的下标
  var index = e.currentTarget.dataset.index;
  //所有图片
  var imgs = this.data.imgs;
 
  wx.previewImage({
  //当前显示图片
  current: imgs[index],
  //所有图片
  urls: imgs
  })
 }
})

image.wxml代码:

<button class="upload-img-btn" bindtap="chooseImg">上传</button>
 <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
 <image src="{{item}}" data-index="{{index}}" mode="widthFix" bindtap="previewImg" bindlongpress="deleteImg"></image>
 </view>

保存到服务器上的代码未完待续。

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

Javascript 相关文章推荐
jQuery 创建Dom元素
May 07 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
详解webpack打包vue时提取css
May 26 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
vue实现底部菜单功能
Jul 24 #Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 #Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 #Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 #Javascript
JavaScript引用类型Array实例分析
Jul 24 #Javascript
详解微信小程序调起键盘性能优化
Jul 24 #Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 #Javascript
You might like
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php读取xml实例代码
2010/01/28 PHP
joomla数据库操作示例代码
2016/01/06 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
Open and Print a Word Document
2007/06/15 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
莱鸟介绍window.print()方法
2016/01/06 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python循环语句之break与continue的用法
2015/10/14 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python Cartopy的基础使用详解
2020/11/01 Python
详解rem 适配布局
2018/10/31 HTML / CSS
带薪年假请假条
2014/02/04 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
村道德模范事迹材料
2014/08/28 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
怎么写工作检讨书
2014/11/16 职场文书
党员公开承诺书2015
2015/01/21 职场文书
武当山导游词
2015/02/03 职场文书
母亲节寄语大全
2015/02/27 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏