重合部分代码详见单图片上传
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>