• 微信小程序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
        });
      }
    })
  • 相关阅读:
    QTP的那些事不能识别web上的测试对象
    ASP.NET 2.0 页面事件执行顺序 摘自http://www.cnblogs.com/chinadragon/archive/2009/11/21/1607761.html
    javascript replace方法的使用注意点
    HTML转义字符转载http://www.8189090.com/character/
    有无Global.asax文件对Session的影响
    四叉树索引引用自http://hi.baidu.com/geochenyj/blog/item/189f2fed07d041d6b31cb1b6.html
    GirdView固定行头
    CSS的常用滤镜(filter)属性及语句大全摘自http://www.8tops.com/113_skill_8267CEB6473B4AF1ABF669340E3AD2EF.htm
    Clone基类http://www.legalsoft.com.cn/docs/986.html
    自定义控件不能设置属性
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7089406.html
Copyright © 2020-2023  润新知