微信SDK 图片动态添加删除等等

1.添加一个图片的容器,默认有一张”添加”的图片

<div id="uploader-demo" style="margin: 0.5em 0;">
    <div class="uploader-list" id="fileList">
	<table style="width: 100%;">
	    <tr id="div_table" class="container_12">
		<td class="grid_3">
		    <div class="file-item thumbnail" style="margin: auto;">
			<img class="file-item-add" src="${pageContext.request.contextPath}/images/weixin/icon_addpic.png"> <img class="file-item-close" style="display: none;" src="${pageContext.request.contextPath}/images/weixin/uploadimg_cancel.png"> <input class="file-item-input" type="text" name="pics" value="" data-role="none" style="display: none;">
		    </div>
		</td>
	    </tr>
	</table>
    </div>
</div>

2.JS代码,中间有一大段是微信sdk和AJAX图片上传功能

/***************************图片处理********************************/
var strImg = "<td class='grid_3'><div class='file-item thumbnail' id='pic1' style='margin: auto;'><img class='file-item-add' src='${pageContext.request.contextPath}/images/weixin/icon_addpic.png'> <img class='file-item-close' style='display: none;' src='${pageContext.request.contextPath}/images/weixin/uploadimg_cancel.png'> <input class='file-item-input' type='text' name='pics' data-role='none' style='display: none;'> </div></td>";
$(document).ready(function() {
var max_size = 3;
var container = $("#div_table");
var x = container.length;
console.info("x--------------->" + x);
var cur_size = 1;

var img_size = 0;

$("body").on("click", ".file-item-add", function(e) {
	var nodeCur = $(this);
	images.localId = [];
	wx.chooseImage({
		count : 1,
		success : function(res) {
			alert("确认上传?");
			if (res.localIds.length > 1) {
				alert("请您选择单张图片...");
			} else if (res.localIds.length == 0) {
				alert("您没有选择图片...");
			} else {
				images.localId = res.localIds;
				wx.uploadImage({
					localId : images.localId[0],
					success : function(res) {
						$.ajax({
							timeout : 10000,
							url : '${pageContext.request.contextPath}/weixin/parse.do?method=downloadFile',
							type : 'post',
							data : 'mediaID=' + res.serverId + '&type=image',
							dataType : 'json',
							beforeSend : function() {
							},
							error : function(XMLHttpRequest, textStatus, errorThrown) {
							},
							success : function(data) {
								if (data.success_code == 200) {
									nodeCur.attr("src", data.msg);
									nodeCur.siblings(".file-item-close").css('display', 'block');
									nodeCur.parent().find("input").val(data.msg);
									console.info(data.msg);
									var next_node = $(this).parents(".grid_3").next().html();
									if (x <= max_size && undefined == next_node) {
										cur_size++;
										$(container).append(strImg);
										x++;
										img_size++;
									} else {
										img_size++;
									}
								} else {
								}
							}
						});
					},
					fail : function(res) {
						errorMsg('pic3');
					}
				});
			}
		}
	});
	return false;
})
$("body").on("click", ".file-item-close", function(e) {
	var nodeCur = $(this);
	if (img_size < x) {
		$(this).parents(".grid_3").remove();
		img_size--;
		x--;
	} else if (img_size = x) {
		var next_node = $(this).parents(".grid_3").next().html();
		if (undefined == next_node) {
			$(this).siblings(".file-item-add").attr("src", "${pageContext.request.contextPath}/images/weixin/icon_addpic.png");
			nodeCur.parent().find("input").val("");
			nodeCur.css('display', 'none');
		} else {
			$(this).parents(".grid_3").remove();
			$(container).append(strImg);
		}
		img_size--;

	}
	return false;
})

});
/***************************图片处理********************************/