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


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 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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函数http_build_query使用详解
2014/08/20 PHP
php编写简单的文章发布程序
2015/06/18 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
prototype 的说明 js类
2006/09/07 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
Python入门篇之字典
2014/10/17 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
简单了解Python中的几种函数
2017/11/03 Python
python中列表和元组的区别
2017/12/18 Python
python机器学习之随机森林(七)
2018/03/26 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python爬取梨视频的示例
2021/01/29 Python
python urllib和urllib3知识点总结
2021/02/08 Python
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
教师自荐信范文
2013/12/09 职场文书
单位单身证明范本
2014/01/11 职场文书
安全生产活动月方案
2014/03/09 职场文书
Vue如何清空对象
2022/03/03 Vue.js