• 上传组件

    上传组件

    上传组件主要用于图片上传,一般需要配合相册组件使用,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