微信jsjdk的照片选择、上传使用

这里首先默认你已经稍微浏览过微信的文档说明，并完成jdk的config流程。

然后直接把照片选择、上传的两个方法放出来：

function photoSelect(str, num){//照片选择，str为数据指向
    num = !num? 1:num;//单次选择数量，num为空时，单选
    wx.chooseImage({
        count: num,//当num大于9，没有反应，打开调试状态会有超出上限的报错
        sizeType: ['original', 'compressed'],
        success: function (res) {
            var localIds = res.localIds;
            photoUpload(str, localIds);
        }
    });
}
function photoUpload(str, localIds){//照片上传
    var localId = localIds.splice(0, 1);
    //ios专用
    if(localId.indexOf("wxlocalresource") != -1){
        localId = localId.replace("wxlocalresource", "wxLocalResource");
    }
    //当不使用定时器的时候，连续上传1+照片后，会莫明其妙滴不再执行，迫不得已掏出定时器这个大杀器~
    setTimeout(function(){
        wx.uploadImage({//这个玩意一次只能上传一张图片
            localId: localId.toString(),
            isShowProgressTips: 1,
            success: function(res){
                var serverId = res.serverId;
                photoSelectData[str].url(localId,serverId);//这个根据自己需求添加
                //localIds没有传完，即回调函数继续上传
                if(localIds.length >= 1){
                    photoUpload(str, localIds);
                }
            },
            fail: function(res){
                alert('照片上传失败，请稍后再试！');
            }
        })
    },50);
}

功能测试环境是公众平台的测试号。
图片上传，当不使用定时器的时候，连续上传1+照片后，会莫明其妙滴不再执行，知道什么情况的，或者能不使用定时器解决的兄弟情告知我一声。
图片上传中，截取的localId需要使用toString()转换一下才能正确识别。

功能代码完成后，我们来看看数据的处理，分单选和多选两种情况，一起放出来(不含样式，具体使用，还得看具体需求)：

//标签
//单张上传样例
<a class="photo-select" data-id="firstPhoto">
    <img src="" id="firstPhoto"/>
</a>
<a class="photo-select" data-id="secondPhoto">
    <img src="" id="secondPhoto"/>
</a>
//多张上传样例
<div class="batch-upload">
    <div class="batch-title">其他照片</div>
    <div class="batch-pic" id="otherPhoto">
    </div>
    <a class="photo-select" data-id="otherPhoto" data-num="9">批量上传</a>
</div>

//微信config处理
wx.ready(function(){
    $('.photo-select').click(function(){
        var $this = $(this);
        var str = $this.attr('data-id');
        var num = $this.attr('data-num')?$this.attr('data-num'):null;
        photoSelect(str, num);
    });
});
wx.error(function(){
    $('.photo-select').click(function(){
        alert('微信权限获取失败，请稍后再试！');
    });
});

//数据处理集合
//包括serverId的信息保存，是否有图片的状态判断，以及图片展示
photoSelectData = {
    //单张上传
    firstPhoto: {
        serverId: '',
        state: false,
        url: function(data,serverId){
            $('#firstPhoto').attr('src',data);
            this.state = true;
            this.serverId = serverId;
        }
    },
    secondPhoto: {
        serverId: '',
        state: false,
        url: function(data,serverId){
            $('#firstPhoto').attr('src',data);
            this.state = true;
            this.serverId = serverId;
        }
    },
    //批量上传
    otherPhoto: {
        serverId: [],
        state: false,
        url: function(data, serverId){
            var html = '<div class="pic">'
                            +'<i class="pic-close" onclick="photoCancel('+"'otherPhoto'"+',this)"></i>'
                            +'<img src="'+data+'">'
                        +'</div>';
            $('#otherPhoto').append(html);
            this.serverId.push(serverId);
            photoSelectData.batchState('otherPhoto');
        },
        //批量上传状态判断
        batchState: function(str){
            if(photoSelectData[str].serverId.length >= 1){
                photoSelectData[str].state = true;
            }else{
                photoSelectData[str].state = false;
            }
        }
    }
}

//多张上传的单张图片删除
function photoCancel(str, obj){
    var $obj = $(obj).parent();
    var $pic = $('#'+str+' .pic');
    var index = $pic.index($obj);
    $pic.eq(index).remove();
    photoSelectData[str].serverId.splice(index,1);
    photoSelectData.batchState(str);
}