<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. Shiro -- (三) 自定义Realm

    简介: Realm:域,Shiro 从从 Realm 获取安全数据(如用户.角色.权限),就是说 SecurityManager 要验证用户身份,那么它需要从 Realm 获取相应的用户进行比较以确定 ...

  2. [javascript] test() 方法进行正则验证

    test() 方法用于检测一个字符串是否匹配某个模式 最近遇到的某业务中进行发票抬头的正则验证如下: console.log(/^[a-zA-Z\u4e00-\u9fa5\s()()<>& ...

  3. 2019-2020-2 20175121杨波《网络对抗技术》第一周kali的安装

    2019-2020-2 20175121杨波<网络对抗技术>第一周kali的安装 标签 : Linux 一.下载安装kali 1.下载kali 下载链接 打开链接进入官网后,点击Torre ...

  4. Python 编程入门(2):复杂数据类型(列表,字典)

    以下所有例子都基于最新版本的 Python,为了便于消化,每一篇都尽量短小精悍,希望你能尽力去掌握 Python 编程的「概念」,可以的话去动手试一下这些例子(就算目前还没完全搞懂),加深理解. 在 ...

  5. VS自定义模板-以自定义类模板为样例

    前言 在实际的工作过程中部分公司会要求开发人员在开发过程中需遵守一些开发规范,开发规范中主要包括文件的注释规范,项目.文件.变量的命名规范(例如驼峰规范)等等.例如我们代码规范中就有一项新增文件的文件 ...

  6. Java连载88-HashSet集合与hashCode方法重写

    一.Set集合 1.HashSet底层实际上是一个HashMap,HashMap底层采用了哈希表数据结构. 2.哈希表又称为散列表,哈希表底层是一个数组,这个数组中每一个元素是一个单向链表,每个单向链 ...

  7. python简明教程

    Python简明教程 MachinePlay关注 0.7072018.09.26 01:49:43字数 2,805阅读 9,287 Python一小时快速入门 1.Python简介   pylogo. ...

  8. 为什么你SQL Server中SQL日期转换出错了呢?

    开发人员有时候使用类似下面SQL将字符串转换为日期时间类型,乍一看,这样的SQL的写法是没有什么问题的.但是这样的SQL其实有时候就是一个定时炸弹,随时可能出现问题(),下面简单对这种情况进行一个简单 ...

  9. 一台服务器搭建部署两个或多个Redis实例

    问题描述: 今天程序那边说测试服里面有两个项目,为了数据不冲突,想一台服务器搞两个Redis实例, 然后自己这边查询了一下,确实可以这么整,只需要区分端口号和区分配置文件方面就行, 原理与nginx和 ...

  10. 通过sd文件发布的FeatureAccess服务不能查看到图层

    发布服务有两种方法, 1. 用ArcMap --Share As - service --publish a service 此方法可以直接将地图数据发布到ArcGIS  Server 的地图服务中, ...