Uploader
上传组件。Uploader UI 提供与WeLink规范一致的视图。 组件提供了两种上传类型、多个上传状态、删除图片的样式。
- 上传类型：单张图片上传、多张图片上传。
- 上传状态：正在等待上传、上传中、上传成功、上传失败。
效果示例
HTML
<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>