layui动态渲染图片上传

之前没用过layui，这次跟着遇到这个问题，记录一下。

一开始试着只在外部统一渲染，结果始终不行，最后发现每次添加元素后渲染就可以了

<div   id="add1">+添加</div>
<div class="my_info_imglist">
<button type="button" class="layui-btn btn_img"  id="0">上传</button>
<input type="hidden" id="img_id0" lay-verify="required" name="list_img[]" value=""	lay-verify="dantu1">
<img src="__STATIC__/view/Admin/img/moren.png" id="list_img_src0"   style="width: 60px;height: 60px;display: block;margin-left:20px;">
</div>
 
<div id="app_img_list"  >
</div>


<script>
layui.use('upload', function(){

  var upload = layui.upload;
  var k = 0;
  $(document).on("click", "#add1", function (event) {
      	k++;
    	var idnum = "img_id" + k;
    	var srcid = "list_img_src" + k;
    	$('#app_img_list').append(' 缩略图：<button type="button" class="layui-btn btn_img" id="'+k+'" >上传</button><input type="hidden" id="' + idnum + '" name="list_img[]" value="" lay-verify="dantu1"><img  id="' + srcid + '" style="width: 60px;height: 60px;display: block;margin-left:20px;"></div><div class="list-delete">-删除</div></div>')
  //执行实例
  var uploadInst = upload.render({
    elem: '.btn_img' //绑定元素
    ,url: '#######' //上传接口
    ,done: function(res){
      //上传完毕回调
      	var item = this.item;
		var cid = item.attr('id');
		$('#srcid ' + cid).attr('src', res.src);
		$("#img_id"+cid).val(res.src);
    }
    ,error: function(){
      //请求异常回调
    }
  });
});

//然后再外部给初始的按钮渲染一次
upload.render({
					elem: '.btn_img'
					, url: "########}" //上传接口
					, done: function (res, index, upload) { //上传后的回调
					        var item = this.item;
							var cid = item.attr('id');
						 				$('#srcid ' + cid).attr('src', res.src);
						 				$("#img_id"+cid).val(res.src);
			

					},
					exts: 'jpg|png|gif|bmp|jpeg',

				});


}
</script>