layui多图片上传

<div class="layui-form-item" style="position: relative;width: 1100px;">
            <label class="layui-form-label">照片墙</label>
            <div class="zpq" id="zpq" style="position: relative;float:left;width: 810px;">
                <button type="button" class="layui-btn" id="upload-img4" style="position: relative; margin-left: 10px;margin-top: 10px;">照片墙图片上传</button>
                <br/>
            </div>
            <input id="pictureLists" name="pictureLists" type="hidden">
        </div>
        <div class="layui-upload" style="position:relative;width: 1008px;">
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;position:relative;left:92px;">
                照片墙预览图
                <div class="layui-upload-list" id="demo2"></div>
            </blockquote>
            <div style="position:absolute;top:20px;right:5px;font-size:16px;cursor:pointer;color:#009688" onclick="clearImages()">清空</div>
        </div>
        <div class="layui-form-item" style="width: 1100px;">
            <div class="layui-input-block">
                <p style="color: red;">*营地照片墙需上传3-9张图片。</p>
            </div>
      </div>

	 //多图片上传
        var uploadInst = upload.render({
            elem : '#upload-img4', //绑定元素
            accept: 'file', //普通文件
            url : '${ctx_zull}/system/sys/uploadfile/upload.do?url=files//', //上传接口
            multiple: true,
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            },
            done : function(res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                pictureList.push(res.url + res.realname);
            },
            error : function() {
                //请求异常回调
            }
        });

				//加载照片墙
                if(result.data.pictureList != null){
                    for(var i=0;i<result.data.pictureList.length;i++){
                        $(".zpq").append('<div id="'+result.data.pictureList[i].id+'" class="face_nl"><dl><dt><img class="face_img" src="'+'${ctx_nginx}'+'/'+result.data.pictureList[i].pictrue+'"/><img οnclick=deletezpq("'+result.data.pictureList[i].id+'") class="image_remove" src= "'+'${ctx_script}/product/images/xxx.png'+'"/></dt></dl></div>');
                    }
                }
//删除图片
function deletezpq(id){
        $.ajax({
            type: "post",
            url: '${ctx}/camp/campPicture/deletePicture',
            data: {
                delDataId:id
            },
            dataType: 'json',
            timeout: layerLoadMaxTime,
            beforeSend: function(XMLHttpRequest){
                loadi = layer.load(2, {shade: layerLoadShade,time: layerLoadMaxTime});
            },
            success: function(data, textStatus){
                layer.close(loadi);
                if (data.success==TRUE){
                    layer.msg("操作成功！");
                    $("#"+id).remove();
                }else{
                    layer.msg("删除失败！");
                }
            }
        });
    }
//清空
    function clearImages(){
        $('#demo2').empty();
        pictureList = new Array();
    }