上传组件

上传组件主要用于图片上传,一般需要配合相册组件使用,WeUI 中仅包含样式,上传所需的逻辑操作需自行实现或配合 weui.js(点击查看相关文档) 实现。

  1. <div class="weui-uploader">
  2. <div class="weui-uploader__hd">
  3. <p class="weui-uploader__title">图片上传</p>
  4. <div class="weui-uploader__info">0/2</div>
  5. </div>
  6. <div class="weui-uploader__bd">
  7. <!-- 图片列表 -->
  8. <ul class="weui-uploader__files">
  9. <!-- 已上传图片 -->
  10. <li class="weui-uploader__file" style="background-images:url(images_url/images.png)"></li>
  11. <!-- 上传状态,如上传失败 -->
  12. <li class="weui-uploader__file weui-uploader__file_status" style="background-images:url(images_url/images.png)">
  13. <div class="weui-uploader__file-content">
  14. <!-- 此处图标可根据需求自行选择 -->
  15. <i class="weui-icon-warn"></i>
  16. </div>
  17. </li>
  18. <!-- 上传进度 -->
  19. <li class="weui-uploader__file weui-uploader__file_status" style="background-images:url(images_url/images.png)">
  20. <!-- 上传百分比 -->
  21. <div class="weui-uploader__file-content">50%</div>
  22. </li>
  23. </ul>
  24. <!-- 上传按钮 -->
  25. <div class="weui-uploader__input-box">
  26. <input type="file" class="weui-uploader__input" accept="image/*" multiple>
  27. </div>
  28. </div>
  29. </div>

上传组件 - 图1