jQuery-WEUI的Uploader实现上传多张图片并且限制上传数量的方法

jQuery-WEUI的Uploader目前只有CSS样式，并没有对应的JS插件。于是自己根据之前在网上找到的未完善的代码做了修改。实现了多图上传并且限制上传数量的方法，点击预览的时候可以删除当前已添加的图片。

这是jQuery-WEUI官网的demo示例代码。只有前端css样式。

特别说明，本人已经重写Uploader上传方法，增加了可配置化和可直接上传到服务器的方法。

新方法地址：https://blog.youkuaiyun.com/wuyuander/article/details/100581314

我的上传实现原理是把选择的照片以base64格式存起了。然后我我上传的时候取base64上传再在后台转成图片；

话不多说，先看代码；

<!--weui-uploader 照片上传功能-->
<div class="weui-uploader">
    <div class="weui-uploader__hd">
        <p class="weui-uploader__title">上传现场照片</p>
        <div class="weui-uploader__info" id="uploader_count" data-total="3" data-val="0">0/3</div>
    </div>
    <div class="weui-uploader__bd">
        <ul class="weui-uploader__files" id="uploader_files"></ul>
        <div class="weui-uploader__input-box">
            <input class="weui-uploader__input" id="uploader_input" type="file" accept="image/*" multiple="">>
        </div>
    </div>
</div>
<!--weui-uploader 照片上传功能 END-->

其中 <div class="weui-uploader__info" id="uploader-count" data-total="3" data-val="0">0/3</div>

<!--用于设置最多上传数量以及记录已上传数量的-->

我把实现上传的JS代码封装为weui.expand.js。 然后引用js文件：<script src="/weui/js/weui.expand.js"></script>

jQuery-WEUI的Uploader JS拓展代码：

/*========================================================
*****   weui-uploader 实现图片上传+预览+删除方法  ********
* Editor:吴远德_Dale ,最初引用于：http://jqweui.com/components
*引用JS：jquery-2.1.4.js，weui.min.js，jquery-weui.js；
*引用CSS：weui.min.css；jquery-weui.css；
*用到了：weui-uploader及 实现了上传，weui-gallery实现了预览及删除
========================================================*/
$(function () {
    //var tmpl = '<li id="" class="weui-uploader__file" style="background-image:url(#url#)"></li>',//weui.js中的方法
    //var tmpl = '<li id="" class="weui-uploader__file" style="background-image:url(#url#)"><input type="hidden" id="#imgid#" name="#imgid#" value="#url#" /></li>',
    var tmpl = '<li id="" class="weui-uploader__file" style="background-image:url(#url#)"><input type="hidden" id="#imgid#" name="#imgid#" value="#url#" /><div class="weui-uploader__file-content">50%</div></li>',
        $gallery = $(".weui-gallery"), $galleryImg = $(".weui-gallery__img"),
        $gallery__del = $(".weui-gallery__del"),
        $uploaderInput = $("#uploader_input"),
        $uploaderFiles = $("#uploader_files"),
        $uploaderCount = $("#uploader_count")//显示已上传数的div元素
    ;
    // 允许上传的图片类型
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    // 1024KB，也就是 1MB
    var maxSize = 1024 * 1024;
    // 图片最大宽度
    var maxWidth = 300;
    // 最大上传图片数量
    var imgTotal = 0;
    // 记录当前已上传数量
    var imgCount = 0;
    //记录当前被gallery的click事件打开的li元素
    var $galleryClickLi;
    $uploaderInput.on("change", function (e) {
        var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
        imgTotal = parseInt($uploaderCount.attr("data-total"));//从显示上传数的$uploaderCount获取最大上传数量
        imgCount = parseInt($uploaderCount.attr("data-val"));//从显示上传数的$uploaderCount获取当前的数量
        for (var i = 0, len = files.length; i < len; ++i) {
            var file = files[i];

            if (url) {
                src = url.createObjectURL(file);
            } else {
                src = e.target.result;
            }
            imgCount = imgCount + 1;//数量+1；
            //$uploaderFiles.append($(tmpl.replace('#url#', src)));
            //新方法中对隐藏域的ID和value进行替换
           
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                img.onload = function () {
                    // 不要超出最大宽度
                    var w = Math.min(maxWidth, img.width);
                    // 高度按比例计算
                    var h = img.height * (w / img.width);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 设置 canvas 的宽度和高度
                    canvas.width = w;
                    canvas.height = h;
                    ctx.drawImage(img, 0, 0, w, h);
                    var base64 = canvas.toDataURL('image/png');

                    // 插入到预览区
                    $uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#imgid#', "img" + imgCount).replace('#imgid#', "img" + imgCount).replace('#url#', base64)));

                    // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传
                    var progress = 0;
                    function uploading() {
                        $uploaderFiles.find('.weui-uploader__file-content').text(++progress + '%');
                        if (progress < 100) {
                            setTimeout(uploading, 30);
                        } else {
                            // 如果是失败，塞一个失败图标
                            //$preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');
                            $uploaderFiles.removeClass('weui-uploader__file_status')
                                    .find('.weui-uploader__file-content')
                                    .remove();
                        }
                    }
                    setTimeout(uploading, 30);
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);

        }
        //更新记录数量的$uploaderCount 中的值和显示内容
        updateImgCount();
    });
    $uploaderFiles.on("click", "li", function () {
        $galleryImg.attr("style", this.getAttribute("style"));
        $gallery.fadeIn(100);
        $galleryClickLi = this;//记录被单击调用$gallery显示的li元素
    });
    $gallery.on("click", function () {
        $gallery.fadeOut(100);
    });
    $gallery__del.on("click", function () {
        $gallery.fadeOut(100);
        $galleryClickLi.remove();// $gallery删除事件执行移除li元素
        imgCount = imgCount - 1;
        updateImgCount();
    });

    //更新记录数量的$uploaderCount中的值和显示内容
    function updateImgCount() {
        $uploaderCount.attr("data-val", imgCount);
        $uploaderCount.html("" + imgCount + "/" + imgTotal + "");
        if (imgCount >= imgTotal) {
            $('.weui-uploader__input-box').hide();
        } else {
            $('.weui-uploader__input-box').show();
        }
    }
});

然后引用拓展JS即可实现：