<view class="weui-cells">

  <view class="weui-cell">

    <view class="weui-cell__bd">

      <view class="weui-uploader">

        <view class="weui-uploader__hd">

          <view class="weui-uploader__title">图片上传</view>

          <view class="weui-uploader__info">{{files.length}} / </view>

        </view>

        <view class="weui-uploader__bd">

          <view class="weui-uploader__files" id="uploaderFiles">

            <block wx:for="{{files}}" wx:key="*this">

              <view class="weui-uploader__file" bindtap="previewImage" bindlongpress="deleteImage" id="{{item}}" data-index="{{index}}">

                <image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/>

              </view>

            </block>

          </view>

          <view wx:if="{{files.length < 9}}" class="weui-uploader__input-box" >

            <view class="weui-uploader__input" bindtap="chooseImage"></view>

          </view>

        </view>

      </view>

    </view>

  </view>
</view>
Page({
data: {
files: []
},
chooseImage: function(e) {
var that = this; var images = that.data.files;
wx.chooseImage({
count: - images.length,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
previewImage: function(e) {
wx.previewImage({
current: e.currentTarget.id,
urls: this.data.files
})
},
deleteImage: function(e) {
var that = this; var images = that.data.files; var index = e.currentTarget.dataset.index; //获取当前长按图片下标
wx.showModal({
title: '系统提醒',
content: '确定要删除此图片吗?',
success: function(res) {
if (res.confirm) {
images.splice(index, );
} else if (res.cancel) {
return false;
}
that.setData(
files: images
});
}
})
}
})

小程序图片上传,长按删除,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. RaspberryPi 3b+ 安装OpenWrt教程

    layout: post title: "RaspberryPi 3b+ 安装OpenWrt教程" date: 2019-09-28 22:00:00 +0800 categori ...

  2. 饿了么组件--table组件自定义渲染列,同时伴有v-for和v-if情况

    如题,有一个需求,列数量不固定,在一定条件下,可能会(fixedColumn, A2, A3, A4)或(fixedColumn, B2, B3)情况,其中A2, A3, A4会同时出现,B2, B3 ...

  3. 前端 Docker 基本教程

    为什么要学习 Docker ? 每学一个东西,我们肯定是基于某个需求去学习的,众所周知,软件开发最麻烦的是环境配置,开发好好的,部署出问题就很难受,所以为了确保开发.测试.部署环境一致,且高效的部署所 ...

  4. C#设计模式学习笔记:(6)适配器模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7640873.html,记录一下学习过程以备后续查用. 一.引言 从今天开始我们开始讲结构型设计模式,结构型设 ...

  5. 转:静态链表及其创建(C语言实现)

    http://c.biancheng.net/view/3339.html 折半插入排序算法(C语言代码实现) http://c.biancheng.net/view/3440.html 二叉树层次遍 ...

  6. Python3标准库:heapq堆排序算法

    1. heapq堆排序算法 堆(heap)是一个树形数据结构,其中子节点与父节点有一种有序关系.二叉堆(binary heap)可以使用一个有组织的列表或数组表示,其中元素N的子元素位于2*N+1和2 ...

  7. java设计模式学习笔记--依赖倒转原则

    依赖倒转原则简述 1.高层模块不应该依赖低层模块,二者都应该依赖其抽象 2.抽象不应该依赖细节,细节应该依赖抽象 3.依赖倒转得中心思想时面向接口编程 4.依赖倒转原则时基于这样得设计理念:相对于细节 ...

  8. Html介绍,认识html标签

    什么是网页?网页就是我们我们提前写好的代码样式经过浏览器的渲染展示出来的样式效果.其实我们常说的上网就是浏览各式各样的网页,这些网页都是由html标签组成,下面就是一个简单的网页,效果图如下: 简单看 ...

  9. Jstree在加载时和加载完成的回调方法-sunziren

    1.有时候在使用jstree的时候我们想在它加载完成后立刻执行某个方法,于是我们可以用下面这个jstree自带的回调: .on('ready.jstree', function(event, obj) ...

  10. Linux命令详解之–chmod命令

    在Linux中,一般使用chmod命令来修改文件的属性. 利用 chmod 可以藉以控制文件如何被他人所调用.此命令所有使用者都可使用. 一.Linux chmod命令语法Linux chmod 命令 ...