微信小程序wx.chooseImage和wx.previewImage的综合使用(图片上传不限制最多张数)
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的综合使用(图片上传不限制最多张数)的更多相关文章
- PHP后端代码生成微信小程序带参数的二维码保存成jpg图片上传到服务器getwxacodeunlimit
老板最近有点飘了,他要在PC端的网站放一个微信小程序的二维码,并且扫描这个二维码以后要跳到小程序对应的房源详情页. 这是微信官方给出的文档,连接地址:https://developers.weixin ...
- 微信小程序数据请求方法wx.request小测试
微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...
- 微信小程序wepy开发循环wx:for需要注意
微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...
- 微信小程序-用户拒绝授权使用 wx.openSetting({}) 重新调起授权用户信息
场景模拟:用户进入微信小程序-程序调出授权 选择拒绝之后,需要用到用户授权才能正常使用的页面,就无法正常使用了. 解决方法:在用户选择拒绝之后,弹窗提示用户 拒绝授权之后无法使用,让用户重新授权(微信 ...
- 微信小程序如何在使用wx.request使用cookie
我主要是做asp.net mvc后端开发的,经常使用Jquery的ajax与后台的Web API进行数据交互. 最近公司要做一个小程序,要实现小程序与Web前端的通信,当然小程序是可以实现socket ...
- 微信小程序的坑之wx.miniProgram.postMessage
工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 ...
- 微信小程序组件——详解wx:if elif else的用法
背景 在学习微信小程序开发wxml页面时,需要使用if,else来判断组件是否进行展示,代码如下 <view wx:if="{{is_login==1}}">成功登录& ...
- 微信小程序踩坑之一[wx.request]请求模式
最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
随机推荐
- 20145127《java程序设计》第七周学习总结
一.教材学习内容总结 第十二章 Lambda 1.认识Lambda语法 Lambda 教材的引入循序渐近.深入浅出 Arrays.sort Comparator: 对比C语言中使用函数指针 匿名类与多 ...
- windows下如何获取系统已存在的盘符 【c++】
#include <iostream> #include "classAh.h" #include <atlstr.h> using namespace s ...
- VC++ 删除一个文件目录下的所有文件以及目录
BOOL DoRemoveDirectory(CString chrDirName); BOOL ReleaseDirectory(CString chrDirName) { BOOL bRemove ...
- python循环和布尔表达式总结
1.Python的for循环是循环遍历序列的有限循环. 2.Python的while语句是一个不定循环的例子.只要循环条件保持为真,它就继续迭代.使用不定循环时,程序员必须注意,以免不小心写成无限循环 ...
- Spring Boot条件注解
一.为什么SpringBoot产生于Spring4? Spring4中增加了@Condition annotation, 使用该Annotation之后,在做依赖注入的时候,会检测是否满足某个条件来决 ...
- 51Nod 1091 线段的重叠(贪心+区间相关
1091 线段的重叠 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 20]和[12 25]的重叠部分为[12 20]. 给出N条线段的起点和终点,从中选出2条线段,这两 ...
- 风景区的面积及道路状况分析问题 test
参考文献: https://wenku.baidu.com/view/b6aed86baf1ffc4ffe47ac92.html #include <bits/stdc++.h> us ...
- python group()--转载
import re a = "123abc456" print re.search("([0-9]*)([a-z]*)([0-9]*)",a).group(0) ...
- sudo: unable to resolve host myhostname: Connection timed out
第一种 原因,/etc/hostname 中的hostname 与/etc/hosts 里面的不对应,导致无法解析 将两个文件的hostname改成一样的即可. /etc/hostname aaa / ...
- ubuntu16.04中开启和关闭防火墙
开启防火墙 ufw enable 关闭防火墙 ufw disable