接微信拍照接口多图片上传、预览

重合部分代码详见单图片上传

var imgArr = [];
    var deleteIds=[];
    deleteIds[0] = [];
    deleteIds[1] = [];
    $('触发点').on('click',function() {
        var lens = $(this).parent().find('.img').length;
        var imglen = parseInt(3 - lens);
        var _this = $(this);
        wx.chooseImage({
            count: imglen, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                if(localIds.length === 3){
                    _this.fadeOut();
                }

                localIds.forEach(function(element){
                    _this.before('<div class="img"><img src=' + element + ' data-tab=' + element + '></div><span class="closed"></span>');
                    if(_this.attr("class")=="add"){
                        deleteIds[0].push(element);
                    }
                });
                syncUpload(localIds,_this);

                // 删除操作
                $('.imgs').off("click",'.closed').on('click','.closed',function () {
                    var that = $(this);
                    var id = that.prev(".img").find("img").attr('data-tab');//每张图片上都有一个自定义属性保存了图片在后台中的id
                    if(_this.attr("class")=="add"){
                        for (var i = 0; i < deleteIds[0].length; i++) {
                            if (deleteIds[0][i] === id) {
                                deleteIds[0].splice(i, 1);
                                serverId[0].splice(i, 1);
                            }
                        }
                    }
                    that.prev(".img").remove();
                    that.remove();
                    _this.show();  // 让触发点显示
                });
                var len = $('.imgs .img').length;
                if(len === 3){
                    _this.fadeOut();
                }
            }
        });
    });

预览功能

// 用户选好图片后,点击图片进行预览
    $('.imgs').on('click','.img',function () {
        var currentSrc = $(this).find("img").attr("data-tab");
        var add = $(this).parent().find(".add").attr("class");
        //调用预览图片的接口
        if(add == "add"){
            wx.previewImage({
                current:currentSrc,//当前显示图片的http连接
                urls: deleteIds[0]//需要预览图片的http连接列表
            });
        }

    });

var syncUpload = function(localIds,_this){
        var localId = localIds.shift();
        var has = _this;
        wx.uploadImage({
            localId: localId,
            success: function (res) {
                if(has.hasClass("")){
                    serverId[0].push(res.serverId); // 返回图片的服务器端ID
                }
                // 其他对serverId做处理的代码
                if(localIds.length > 0){
                    if(isiOS){
                        syncUpload(localIds,_this);
                    }else{
                        setTimeout(function(){
                            syncUpload(localIds,_this);
                        },500)
                    }
                }
            }
        });
    };
});

补充下html的代码

<div class="imgs clear">
    <input type="file" class="hide" id="upimg" accept="image/*">
    <div class="add" style="display: inline-block"></div>
</div>