当前位置:主页 > 微信开发 > WeUI >

微信网页开发基础组件上传组件Uploader

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-03
  在做微信公众号开发或是微信小程序开发时常会用到上传图片的功能,例如,上传一张头像、如果是一个图片小程序的话,让用户发布美图的话,就要用到上传组件Uploader了,上传组件,一般配合组件Gallery来使用,来展示上传上去的图片。

图片上传示例



示例代码:

 
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">

                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">图片上传</p>
                            <div class="weui-uploader__info">0/2</div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
                                <li class="weui-uploader__file" style="background-image:url(http://www.phpos.net/tools/weui/example/images/pic_160.png)"></li>
                                <li class="weui-uploader__file" style="background-image:url(http://www.phpos.net/tools/weui/example/images/pic_160.png)"></li>
                                <li class="weui-uploader__file" style="background-image:url(http://www.phpos.net/tools/weui/example/images/pic_160.png)"></li>
                                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(http://www.phpos.net/tools/weui/example/images/pic_160.png)">
                                    <div class="weui-uploader__file-content">
                                        <i class="weui-icon-warn"></i>
                                    </div>
                                </li>
                                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(http://www.phpos.net/tools/weui/example/images/pic_160.png)">
                                    <div class="weui-uploader__file-content">50%</div>
                                </li>
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


  上传文件组件类似Cell组件,上传文件有一套自己的头部和主体组件,分别是weui-uploader__hd和weui-uploader__bd,类似Cell组件里面的weui-cell__hd和weui-cell__bd 。

  上传组件分别两大部分:一部分是上传说明文字(例如,上面的示例中的左上角的“图片上传”),另一部分是具体上传区域,每一部分都都对应着自己的css类。在这两部分最外层有一个类weui-uploader,这个类就像一个大盒子一样,装着这两部分内容,这一个是必须的一个类。


源码分析

  1)类.weui-uploader:

  实际上这个类并没有定义任何css样式,只是用来包裹上传组件。

  2)上传组件的说明文字

    这一部分对应的代码是:

                       <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">图片上传</p>
                            <div class="weui-uploader__info">0/2</div>
                        </div>


  类.weui-uploader__hd:

  这个类对应的css代码是:

.weui-uploader__hd {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 10px;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}

  在这个类里面定义了这个类所在的元素显示的方式为“弹性布局”,即display:flex;

  距离底部内边距为10px;

  最后,三行表示在这个类所在的子元素居中对齐。

  类weui-uploader__title:

.weui-uploader__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}


  标题实行等比缩放,就定义了一点。

  类.weui-uploader__info:

  这个类定义了一个信息说明的颜色。

.weui-uploader__info {
  color: #B2B2B2;
}

  3) 具体的上传组件部分类,也就是除上面说明文字外的其它类.

  类weui-uploader__bd:

.weui-uploader__bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}

  这个类定义了右下外边距,以及溢出将隐藏。

  类.weui-uploader__files:

.weui-uploader__files {
  list-style: none;
}


  这个类一般用在<ul>标签元素里面,所以,在这里面会列出<li>对应的上传组件项,所以,去掉无序列表前面的符号。

  类.weui-uploader__file:

.weui-uploader__file {
  float: left;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 79px;
  height: 79px;
  background: no-repeat center center;
  background-size: cover;
}

  定义了具体的上传组件项的按扭:向左对齐,然后,右下外边距为9px,这里定义具体的上传组件项是为了与上面的类.weui-uploader__bd定义的上右边距相配合使用,这样与上传组件项就会被融合掉,这种技巧经常在页面布局使用,如果不懂的请看本站里面相关的教程。

  然后,定义上传组件的宽度和高度,以及背景图片居中且不重复。

  定义背景尺寸为完全覆盖背景区域。

  类.weui-uploader__file_status:

  定义上传文件的状态类。
 
.weui-uploader__file_status {
  position: relative;
}
.weui-uploader__file_status:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.weui-uploader__file_status .weui-uploader__file-content {
  display: block;
}


  类.weui-uploader__file-content:

  定义上传文件的内容。

.weui-uploader__file-content {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #FFFFFF;
}
.weui-uploader__file-content .weui-icon-warn {
  display: inline-block;
}

  上传文件:
 

    <div class="weui-uploader__input-box">
        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
   </div>



  类.weui-uploader__input-box:

  在这个类所属的div里面才是真正的上传组件的。
 

.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 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: #999999;
}
.weui-uploader__input-box:active:before,
.weui-uploader__input-box:active:after {
  background-color: #999999;
}



  上面是上传按扭激活,以及激活前后定义的颜色样式。

  类.weui-uploader__input:

  这个类定义是用在input输入里面的,定义的内容如下:

 

.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}