微信小程序上传按钮

有时需要上传文件，需要实现一个上传按钮，button效果如下：

效果图

解释&步骤：

1.这是三个部件组成的

2.一个是空的box（后面代码中的<view class='uploader' ></view>）,把边框大小粗细设置好

3.利用：before，：after来分别插入一横，一束

<view class='uploader' ></view>

.uploader {

    float: left;

    position: relative;

    margin-right: 25rpx;

    margin-bottom: 25rpx;

    width: 165rpx;

    height: 165rpx;

    border: 2rpx solid #d9d9d9;

    box-sizing: border-box;

}

.uploader:before {

    content: " ";

    position: absolute;

    width: 4rpx;

    height: 79rpx;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    background-color: #d9d9d9;

}

.uploader:after {

    content: " ";

    position: absolute;

    height: 4rpx;

    width: 79rpx;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    background-color: #d9d9d9;

}