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. 20145127《java程序设计》第七周学习总结

    一.教材学习内容总结 第十二章 Lambda 1.认识Lambda语法 Lambda 教材的引入循序渐近.深入浅出 Arrays.sort Comparator: 对比C语言中使用函数指针 匿名类与多 ...

  2. windows下如何获取系统已存在的盘符 【c++】

    #include <iostream> #include "classAh.h" #include <atlstr.h> using namespace s ...

  3. VC++ 删除一个文件目录下的所有文件以及目录

    BOOL DoRemoveDirectory(CString chrDirName); BOOL ReleaseDirectory(CString chrDirName) { BOOL bRemove ...

  4. python循环和布尔表达式总结

    1.Python的for循环是循环遍历序列的有限循环. 2.Python的while语句是一个不定循环的例子.只要循环条件保持为真,它就继续迭代.使用不定循环时,程序员必须注意,以免不小心写成无限循环 ...

  5. Spring Boot条件注解

    一.为什么SpringBoot产生于Spring4? Spring4中增加了@Condition annotation, 使用该Annotation之后,在做依赖注入的时候,会检测是否满足某个条件来决 ...

  6. 51Nod 1091 线段的重叠(贪心+区间相关

    1091 线段的重叠 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 20]和[12 25]的重叠部分为[12 20]. 给出N条线段的起点和终点,从中选出2条线段,这两 ...

  7. 风景区的面积及道路状况分析问题 test

    参考文献:   https://wenku.baidu.com/view/b6aed86baf1ffc4ffe47ac92.html #include <bits/stdc++.h> us ...

  8. python group()--转载

    import re a = "123abc456" print re.search("([0-9]*)([a-z]*)([0-9]*)",a).group(0) ...

  9. sudo: unable to resolve host myhostname: Connection timed out

    第一种 原因,/etc/hostname 中的hostname 与/etc/hosts 里面的不对应,导致无法解析 将两个文件的hostname改成一样的即可. /etc/hostname aaa / ...

  10. ubuntu16.04中开启和关闭防火墙

    开启防火墙 ufw enable 关闭防火墙 ufw disable