微信小程序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 ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
随机推荐
- 20145314郑凯杰《网络对抗技术》PE文件病毒捆绑(插入捆绑)的实现
20145314郑凯杰<网络对抗技术>PE文件病毒捆绑(插入捆绑)的实现 一.本节摘要 简介:每个应用程序内部都有一定的空间(因为文件对齐余留的00字段)可以被利用,这样就可以保证被插入的 ...
- 删除string类型字符串中指定字符串段
1.实现背景 在插入list行时用邮件的MessageID给对应行命名. 在回复全部邮件时,收件人变为之前收件人中出去“自己”同时加入之前发件人,抄送人还是之前的抄送人,密送人不用管,直接不用带. 在 ...
- 格式化输出%与format
一.%的用法 1.1整数输出 %o —— oct 八进制 : %d —— dec 十进制 : %x —— hex 十六进制 >>> print('%o' % 20) 24 >& ...
- TeeChart的坐标轴
TeeChart一共有六个坐标轴,一下是默认值 tChart1.Axes.Bottom.Visible = true;//横轴 tChart1.Axes.Left.Visible = true;//纵 ...
- hdu 6180 Schedule
Schedule Problem Description There are N schedules, the i-th schedule has start time si and end time ...
- 51nod 1413 权势二进制
本来刚开始还是想用每一位 -1的个数 然后再乘以10 不断累加 后来发现 完全不是这回事啊 因为本身就是0 和 1 所以只要记录出现的最大的数字 就是答案 因为 n >= 1 // 所以不 ...
- 机器学习-数据可视化神器matplotlib学习之路(一)
直接上代码吧,说明写在备注就好了,这次主要学习一下基本的画图方法和常用的图例图标等 from matplotlib import pyplot as plt import numpy as np #这 ...
- RN的第一个API-----注册组件Appregistry
首先解释下AppRegistry是JS运行所有React Native应用的入口 什么是入口? 1.在我们初始化一个react native项目的时候 默认的index.ios.js/index.i ...
- 广州工业大学2016校赛 F 我是好人4 dfs+容斥
Problem F: 我是好人4 Description 众所周知,我是好人!所以不会出太难的题,题意很简单 给你n个数,问你1000000000(含1e9)以内有多少个正整数不是这n个数任意一个的倍 ...
- WM_COPYDATA
1. WM_COPYDATA : https://msdn.microsoft.com/en-us/library/windows/desktop/ms649011(v=vs.85).aspx COP ...