Uploader

上传组件。Uploader UI 提供与WeLink规范一致的视图。 组件提供了两种上传类型、多个上传状态、删除图片的样式。

• 上传类型：单张图片上传、多张图片上传。

• 上传状态：正在等待上传、上传中、上传成功、上传失败。

    <div class="weui-cells__title">样例1</div>
    <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">
                    <i class="icon-16 icon-16-clearImage"></i>
                    <div class="weui-uploader__file-image" style="background-image:url(./images/pic_160.png)"></div>
                </li>
                <li class="weui-uploader__file">
                    <i class="icon-16 icon-16-clearImage"></i>
                    <div class="weui-uploader__file-image" style="background-image:url(./images/pic_160.png)"></div>
                </li>
                <li class="weui-uploader__file">
                    <i class="icon-16 icon-16-clearImage"></i>
                    <div class="weui-uploader__file-image" style="background-image:url(./images/pic_160.png)"></div>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status">
                    <i class="icon-16 icon-16-clearImage"></i>
                    <div class="weui-uploader__file-image" style="background-image:url(./images/pic_160.png)">
                        <div class="weui-uploader__file-content">上传失败</div>
                    </div>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status">
                    <i class="icon-16 icon-16-clearImage"></i>
                    <div class="weui-uploader__file-image" style="background-image:url(./images/pic_160.png)">
                        <div class="weui-uploader__file-content">50%</div>
                    </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 class="weui-cells__title">样例2</div>
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">附件</p>
        </div>
        <div class="weui-uploader__bd2">
            <ul>
                <li class="weui-uploader__attachment">
                    <div class="weui-uploader__attachment-type">
                        <i class="weui-icons-filetype icon-40-folder" data-type="pdf"></i>
                    </div>
                    <div class="weui-uploader__attachment_bd">
                        <p class="weui-uploader__attachment-title">便携工作站1.pdf</p>
                        <p class="weui-uploader__attachment-size">1.1M</p>
                    </div>
                </li>
                <li class="weui-uploader__attachment">
                    <div class="weui-uploader__attachment-type">
                        <i class="weui-icons-filetype icon-40-folder" data-type="ppt"></i>
                    </div>
                    <div class="weui-uploader__attachment_bd">
                        <p class="weui-uploader__attachment-title">2016年华为全联接大会，现场照....ppt</p>
                        <p class="weui-uploader__attachment-size">1.1M</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <br />
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">附件</p>
            <div class="weui-uploader__info">0/2</div>
            <div class="weui-uploader__icon">
                <i class="icon-24 icon-24-uploadfile"></i>
            </div>
        </div>
        <div class="weui-uploader__bd2">
            <ul>
                <li class="weui-uploader__attachment">
                    <div class="weui-uploader__attachment-type">
                        <i class="weui-icons-filetype icon-40-folder" data-type="jpg"></i>
                    </div>
                    <div class="weui-uploader__attachment_bd">
                        <p class="weui-uploader__attachment-title">便携工作站1.JPG</p>
                        <p class="weui-uploader__attachment-size">1.1M</p>
                    </div>
                    <div class="weui-uploader__attachment-clear icon-24 icon-24-delete"></div>
                </li>
                <li class="weui-uploader__attachment">
                    <div class="weui-uploader__attachment-type">
                        <i class="weui-icons-filetype icon-40-folder"></i>
                    </div>
                    <div class="weui-uploader__attachment_bd">
                        <p class="weui-uploader__attachment-title">2016年华为全联接大会，现场照....</p>
                        <p class="weui-uploader__attachment-size">1.1M</p>
                        <i class="weui-uploader__file-progress">
                            <span class="weui-uploader__file-progress_percent" style="width: 60%;"></span>
                        </i>
                    </div>
                </li>
            </ul>
        </div>
    </div>