1. <view class="weui-cells">
  2.  
  3. <view class="weui-cell">
  4.  
  5. <view class="weui-cell__bd">
  6.  
  7. <view class="weui-uploader">
  8.  
  9. <view class="weui-uploader__hd">
  10.  
  11. <view class="weui-uploader__title">图片上传</view>
  12.  
  13. <view class="weui-uploader__info">{{files.length}} / </view>
  14.  
  15. </view>
  16.  
  17. <view class="weui-uploader__bd">
  18.  
  19. <view class="weui-uploader__files" id="uploaderFiles">
  20.  
  21. <block wx:for="{{files}}" wx:key="*this">
  22.  
  23. <view class="weui-uploader__file" bindtap="previewImage" bindlongpress="deleteImage" id="{{item}}" data-index="{{index}}">
  24.  
  25. <image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/>
  26.  
  27. </view>
  28.  
  29. </block>
  30.  
  31. </view>
  32.  
  33. <view wx:if="{{files.length < 9}}" class="weui-uploader__input-box" >
  34.  
  35. <view class="weui-uploader__input" bindtap="chooseImage"></view>
  36.  
  37. </view>
  38.  
  39. </view>
  40.  
  41. </view>
  42.  
  43. </view>
  44.  
  45. </view>
  46. </view>
  1. Page({
  2. data: {
  3. files: []
  4. },
  5. chooseImage: function(e) {
  6. var that = this; var images = that.data.files;
  7. wx.chooseImage({
  8. count: - images.length,
  9. sizeType: ['original', 'compressed'],
  10. sourceType: ['album', 'camera'],
  11. success: function(res) {
  12. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  13. that.setData({
  14. files: that.data.files.concat(res.tempFilePaths)
  15. });
  16. }
  17. })
  18. },
  19. previewImage: function(e) {
  20. wx.previewImage({
  21. current: e.currentTarget.id,
  22. urls: this.data.files
  23. })
  24. },
  25. deleteImage: function(e) {
  26. var that = this; var images = that.data.files; var index = e.currentTarget.dataset.index; //获取当前长按图片下标
  27. wx.showModal({
  28. title: '系统提醒',
  29. content: '确定要删除此图片吗?',
  30. success: function(res) {
  31. if (res.confirm) {
  32. images.splice(index, );
  33. } else if (res.cancel) {
  34. return false;
  35. }
  36. that.setData(
  37. files: images
  38. });
  39. }
  40. })
  41. }
  42. })

小程序图片上传,长按删除,weui的更多相关文章

  1. 小程序--->小程序图片上传阿里OSS使用方法

    小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...

  2. (SSM框架)实现小程序图片上传(配小程序源码)

    阅读本文约"2分钟" 又是一个开源小组件啦! 因为刚好做到这个小功能,所以就整理了一下,针对微信小程序的图片(文件)上传! 原业务是针对用户反馈的图片上传.(没错,本次还提供小程序 ...

  3. 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...

  4. 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...

  5. 微信小程序图片上传并展示

    1.首先编写微信小程序的页面和样式: index.js var total = []; Page({ data: { perImgSrc: [] }, onLoad: function (option ...

  6. 微信小程序---图片上传+服务端接受

    原文地址:http://blog.csdn.net/sk719887916/article/details/54312573 微信小程序,图片上传,应用地方-修改用户信息的头像. 详细代码: 小程序的 ...

  7. 微信小程序图片上传和裁剪

    本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...

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

    效果: 一,下面是上传图片的效果 image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { v ...

  9. 微信小程序图片上传java后台(前后端代码)

    小程序代码 upload:function(e){ var that = this; wx.showActionSheet({ itemList: ['从相册选择','拍照'], itemColor: ...

随机推荐

  1. .NET CORE(C#) WPF简单菜单MVVM绑定

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF简单菜单MVVM绑定 阅读导航 本文背景 代码实现 本文参考 ...

  2. C#设计模式学习笔记:(16)观察者模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7928521.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第四个模式--观 ...

  3. C# protobuf自动更新cs文件

    网上的教程大都是手动通过protoc编译, 比较难用 给当前工程添加"Google.Protobuf"和"Grpc.Tools"的引用(通过nuget), 然后 ...

  4. C#上位机之—WinForm实现串口通信示例

    上位机开发常用到串口通信来控制设备,串口通信的主要参数:COM口,波特率(9600),停止位(One),数据位(8),校验位(None),括号中的是常用值,具体意思我也不太懂,会用能实现功能就行哈哈: ...

  5. RestTemplate + okhttp 实现远程调用

    1. 添加依赖 <!-- https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp --> <dependency ...

  6. too many open files异常及解决办法

    1.问题描述: 最近项目中由于大批量的操作文件,项目部署在Linux服务器上,突然发现出现了 too many open files异常. 经过一番查阅,(直译过来就是文件打开数过多)但是查阅了相关的 ...

  7. Java泛型(T)与通配符?

    前言:使用泛型的目的是利用Java编译机制,在编译过程中帮我们检测代码中不规范的有可能导致程序错误的代码.例如,我们都知道list容器可以持有任何类型的数据,所以我们可以把String类型和Integ ...

  8. JS函数深入

    函数的本质是对象 三种定义方式 1.  字面量=function声明 function add() { // body... } add(); 2.  var赋值表达式 var add = funct ...

  9. Android布局样式

    本篇介绍一下Android中的几种常用的布局,主要介绍内容有: ·View视图 ·LinearLayout ·RelativeLayout 在介绍布局之前,我们首先要了解视图View的基本属性,因为所 ...

  10. 【jQuery实例】Ajax登录页面

    登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口.接下来,我来带领大家打造一个漂亮.安全的登录界面,使用的技术是ASP.NET+jQuery 先来看看预览效果   Ajax登录重点在 ...