• 微信小程序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{
       100%;
      height: auto;
      display: flex;
      flex-direction: column;
      background-color: #fff;
    }
    .weui-uploader{
       94%;
      margin-left: 3%;
      padding: 0px 0px 9px;
    }
    .weui-uploader__file {
      float: left;
      margin-right: 9px;
       margin-top: 9px;
    }
    .weui-uploader__img {
      display: block;
       79px;
      height: 79px;
    }
    .weui-uploader__file_status {
      position: relative;
    }
    .weui-uploader__input-box {
      float: left;
      position: relative;
      margin-right: 9px;
      margin-top: 9px;
       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 {
       2px;
      height: 39.5px;
    }
    .weui-uploader__input-box:after {
       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;
       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
        });
      }
    })
  • 相关阅读:
    位运算与变量多状态表达
    判断点是否在多边形内
    向量旋转
    小怪受击身体变红特效代码
    字典 Key值转换为数组
    Android中的Selector的使用总结
    Android 常见的工具类
    成为Android高手必须掌握的8项基本要求
    K-means算法
    Android 5.0以上获取系统运行进程信息
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7089406.html
Copyright © 2020-2023  润新知