本文通过我个人设计的系统为案例来教会读者使用weui的uploader，先来看看效果图：

                                                                                         图片上传框

 

                                                                                            PC端

 

                                                                                         移动端

首先，微信的官方文档不会一步一步教会你怎么用，但是在其中能发现很多使用的细节，推荐看一下，遇到问题可以找到解决方法：

微信weui官方文档

下面，通过我系统的案例让大家一步步了解如何使用weui的uploader：

1、编写文件上传框Html

<div class="weui-cells__title">商品图片上传</div>
<div class="weui-cells weui-cells_form" id="uploader"><div class="weui-cell"><div class="weui-cell__bd"><div class="weui-uploader"><div class="weui-uploader__hd"><p class="weui-uploader__title">图片列表</p><div class="weui-uploader__info"><span id="uploadCount">0</span>/4</div></div><div class="weui-uploader__bd"><ul class="weui-uploader__files" id="uploaderFiles"></ul><div class="weui-uploader__input-box"><input id="uploaderInput" class="weui-uploader__input" ty