WXML:

<view class="weui">
<view class="weui-uploader">
<view class="weui-uploader__files">
<block wx:for="{{imageList}}" wx:for-item="image" wx:for-index='idx'>
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="{{image}}" data-id="{{idx}}" data-src="{{image}}" bindtap="previewImage"></image>
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>

WXSS:

page {
font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
icon {
vertical-align: middle;
}
.weui{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
background-color: #fff;
}
.weui-uploader{
width: 94%;
margin-left: 3%;
padding: 0px 0px 9px;
}
.weui-uploader__file {
float: left;
margin-right: 9px;
margin-top: 9px;
}
.weui-uploader__img {
display: block;
width: 79px;
height: 79px;
}
.weui-uploader__file_status {
position: relative;
}
.weui-uploader__input-box {
float: left;
position: relative;
margin-right: 9px;
margin-top: 9px;
width: 77px;
height: 77px;
border: 1px solid #d9d9d9;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #d9d9d9;
}
.weui-uploader__input-box:before {
width: 2px;
height: 39.5px;
}
.weui-uploader__input-box:after {
width: 39.5px;
height: 2px;
}
.weui-uploader__input-box:active {
border-color: #999;
}
.weui-uploader__input-box:active:before, .weui-uploader__input-box:active:after {
background-color: #999;
}
.weui-uploader__input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}

JS:

Page({
data: {
imageList: [],
},
chooseImage: function (event) {
var that = this;
wx.chooseImage({
count: 5, // 一次最多可以选择2张图片一起上传
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var imgeList=that.data.imageList.concat(res.tempFilePaths);
that.setData({
imageList: imgeList
});
}
})
},
previewImage: function (e) {
var that = this;
var dataid = e.currentTarget.dataset.id;
var imageList = that.data.imageList;
wx.previewImage({
current: imageList[dataid],
urls: this.data.imageList
});
}
})

微信小程序wx.chooseImage和wx.previewImage的综合使用(图片上传不限制最多张数)的更多相关文章

  1. PHP后端代码生成微信小程序带参数的二维码保存成jpg图片上传到服务器getwxacodeunlimit

    老板最近有点飘了,他要在PC端的网站放一个微信小程序的二维码,并且扫描这个二维码以后要跳到小程序对应的房源详情页. 这是微信官方给出的文档,连接地址:https://developers.weixin ...

  2. 微信小程序数据请求方法wx.request小测试

    微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  3. 微信小程序wepy开发循环wx:for需要注意

    微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...

  4. 微信小程序-用户拒绝授权使用 wx.openSetting({}) 重新调起授权用户信息

    场景模拟:用户进入微信小程序-程序调出授权 选择拒绝之后,需要用到用户授权才能正常使用的页面,就无法正常使用了. 解决方法:在用户选择拒绝之后,弹窗提示用户 拒绝授权之后无法使用,让用户重新授权(微信 ...

  5. 微信小程序如何在使用wx.request使用cookie

    我主要是做asp.net mvc后端开发的,经常使用Jquery的ajax与后台的Web API进行数据交互. 最近公司要做一个小程序,要实现小程序与Web前端的通信,当然小程序是可以实现socket ...

  6. 微信小程序的坑之wx.miniProgram.postMessage

    工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 ...

  7. 微信小程序组件——详解wx:if elif else的用法

    背景 在学习微信小程序开发wxml页面时,需要使用if,else来判断组件是否进行展示,代码如下 <view wx:if="{{is_login==1}}">成功登录& ...

  8. 微信小程序踩坑之一[wx.request]请求模式

    最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...

  9. 微信小程序_(校园视)开发视频的展示页_上

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

随机推荐

  1. 20145118《Java程序设计》 第7周学习总结

    20145118<Java程序设计> 第7周学习总结 教材学习内容总结 本周学习内容为第十三章,以下为教材内容重点总结: 1.格林威治标准时间简称GMT时间. 2.java.util.Da ...

  2. Matchvs 使用记录

    Matchvs Matchvs视频教程. https://doc.matchvs.com/VideoTutorials/videogs matchvs下载资源. http://www.matchvs. ...

  3. P3216 [HNOI2011]数学作业 (矩阵快速幂)

    P3216 [HNOI2011]数学作业 题目描述 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 NN 和 MM ,要求计算 Concatenate (1 .. N ...

  4. json字符窜转对象

    第一种方法: 注意引用:using System.Runtime.Serialization.Json; using System.IO; static void Main(string[] args ...

  5. ios苹果机系统的1px显示解决方案

    1px边框在iPhone高清屏下,其实会变成2个物理像素的边框. /* 解决一像素问题 */ .navigation:before{ content: ""; pointer-ev ...

  6. c++ 查找容器中不满足条件的元素,返回iterator(find_if_not)

    #include <iostream> // std::cout #include <algorithm> // std::find_if_not #include <a ...

  7. MongoDB(课时22 过期索引)

    3.6.2 过期索引 在一些程序的站点会出现若干秒之后信息被删除的情况,例如:手机信息验证码,那么在MongoDB里面可以轻松实现过期索引.但这个时间往往不怎么准确. 范例:设置过期索引(实现过期索引 ...

  8. 快速幂模n运算

    模运算里的求幂运算,比如 5^596 mod 1234, 当然,直接使用暴力循环也未尝不可,在书上看到一个快速模幂算法 大概思路是,a^b mod n ,先将b转换成二进制,然后从最高位开始(最高位一 ...

  9. android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)

    首先我们还是看一些示例:(网易,新浪,百度) 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理 ...

  10. jsp post/get中接处理

    jsp post/get中接处理 以参数:username为便 post接收中文比get接收中文要方便多了. <%@ page contentType="text/html;chars ...