<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. JS-重写内置的call、apply、bind

    首先看call和apply,第一个参数就是改变的this指向,写谁就是谁,如果是非严格模式下,传递null或undefined指向的也是window,二者唯一的区别是执行函数时,传递的参数方式不同,c ...

  2. MySQL安全管理

    数据库服务器通常包含关键的数据,确保这些数据的安全和完整需要利用访问控制. 一.访问控制 MySQL服务器的安全基础:用户应该对他们需要的数据具有适当的访问权,既不能多也不能少. 访问控制:你需要给用 ...

  3. [VB.NET Tips]创建匿名类型列表

    在调用一些Web API时经常要发送或接收一些数据,在构造Json时可能要创建一些类. 很多都是在调用相关方法才使用到这些类,那使用匿名类型是个不错的选择.如果要传些表结构数据时,就要创建List. ...

  4. Linux基础:df命令总结

    本文只总结一些常用的用法,更详细的说明见man df和 df --help. df命令 df命令用于显示目前在Linux系统上的文件系统的磁盘使用情况统计. df命令主要是从各文件系统的Super b ...

  5. AGC011-C Squared Graph

    题意 给定一个\(n\)个点\(m\)条边的图,构建一个\(n^2\)个点的图,新图的每个点都可以看成一个二元组,新图上的点\((a,b)和(a′,b′)\)之间有边,当且仅当原图中\((a,a′), ...

  6. luogu P3369 【模板】普通平衡树

    ————————————————版权声明:本文为CSDN博主「ModestCoder_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https:// ...

  7. python数据类型(第二弹)

    针对上一篇博文提出的若干种python数据类型,笔者将在本文和后续几篇博文中详细介绍. 本文着重介绍python数据类型中的整数型.浮点型.复数型.布尔型以及空值. 对于整数型.浮点型和复数型数据,它 ...

  8. B. Modulo Equality

    当时想到的第一个想法是用拓展欧几里得解方程,求x的最小正解.一发交了之后发现爆long long,因为m是1e9. 因此本题的正解是暴力,保证有解的情况下,那么a数组中的一个数必然对应着b数组中的一个 ...

  9. 吴裕雄--天生自然HADOOP操作实验学习笔记:mapreduce和yarn命令

    实验目的 了解集群运行的原理 学习mapred和yarn脚本原理 学习使用Hadoop命令提交mapreduce程序 学习对mapred.yarn脚本进行基本操作 实验原理 1.hadoop的shel ...

  10. ng-项目结构

    ng启动过程 目录结构 . ├── e2e 端到端测试(暂且不关心) ├── node_modules npm安装的第三方包 ├── src 存放业务源码 ├── .angular-cli.json ...