WEUI文件上传详解

本文通过我个人设计的系统为案例来教会读者使用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" type="file"
                               acce