实现页面中多张图片上传修改

 1.在控制层的编辑方法上调用显示图片的方法

List<ActivityImage> list=activityImageService.findList("activityId",id);
		if(null != list){
			tActivity.setActivityImage(list);
		}

2.在编辑页面中显示图片

    

<!--/row-->
                           <div class="form-group">
                       		<div class="row">
                       			<div class="col-sm-12">
                       			 	<label class="col-sm-3 control-label">活动图片</label>
	                                <div class="col-sm-6">
	                               <ul id="imageShow" class="form-group">
                                        <!--如果存在 -->
                                         [#if tActivity.activityImage??]
                                          <!-- 遍历集合 -->
	                                      [#list tActivity.activityImage as item]
	                                     <li class="img-li"><img src="${base}${item.image}" style="width: 130px;height: 120px;"><a class="del" data-id="${img_index}" onclick="del(this)">x</a></li>
	                                       [/#list]
                                           [/#if]
                                       </ul>
	                                	<div class="upload" id="upload">
											<label id="uploadGroup">上传<input type="file" id="fileGroup"/></label>
										</div>
	                                    <input type="hidden" name="imgPath" id="imgPath"  class="form-control"/>
	                                 </div>   
                       			</div>
							</div>
                        </div>

3、书写编辑图片的ajax

//活动图片
        var imgUrl = [];
         [#list tActivity.activityImage as item]
            imgUrl.push("${item.image}");
          [/#list]
          $('#imgPath').val(imgUrl);
        $('#uploadGroup').on('change',function(){
    		if (imgUrl.length < 5) {
    			var formData = new FormData();
        		var img_file = document.getElementById("fileGroup");
        		var fileObj = img_file.files[0]; 
        		formData.append("file",fileObj);
        		formData.append("fileType","image");
	    		$.ajax({
	    			url:'${base}/api/common/upload.jhtml',
	    			type:'POST',
	    			data:formData,
	    			async:false,
	    			processData:false,
	    			contentType:false,
	    			success:function(data){
	    				data=JSON.parse(data);
    					$('#uploadGroup').html("继续上传<input type='file' id='fileGroup'/>");
    					if (imgUrl.length == 4) {
	    					$('#uploadGroup').html("");
						}
    					imgUrl.push(data.object);
	    				$("#imageShow").html("");
	    				for (var i= 0 ; i < imgUrl.length; i++) {
			    			$("#imageShow").append("<li class='img-li'><img src=${base}"+imgUrl[i]+" style='width: 130px;height: 120px;'><a class='del' data-id='"+i+"' onclick='del(this)'>x</a></li>");
						}
	    			}
	    		})
			}
    		$('#imgPath').val(imgUrl);
		});
        function del(obj) {
        	if (imgUrl.length != 4){
        		$('#uploadGroup').html("");
        		$('#uploadGroup').html("继续上传<input type='file' id='fileGroup'/>");
        	}
        	$(obj).parent().remove();
        	imgUrl.splice($(obj).attr("data-id"), 1);
        	$("#imageShow").html("");
        	for (var i= 0 ; i < imgUrl.length; i++) {
    			$("#imageShow").append("<li class='img-li'><img src=${base}"+imgUrl[i]+" style='width: 130px;height: 120px; padding: 0'><a class='del' data-id='"+i+"' onclick='del(this)'>x</a></li>");
			}
        	$('#imgPath').val(imgUrl);
       	};

4、样式的设置

      

<link rel="stylesheet" href="${base}/resources/css/my-upload.css">
	<style type="text/css">
	ul {
		list-style: none;
	}
	
	li.img-li {
		position: relative;
		float: left;
	}
	
	.img-li a.del {
		position: absolute;
		color:black ;
		background:red ;
		top: 0;
		right: 0;
		width: 20px;
		height: 20px;
		text-align: center;
		border-radius: 50%;
	}
	</style>

5、css中的样式

.upload {
	width: 100px;
	position: relative;
	background-color: darkorange;
	border-radius: 20px;
	height: 25px;
	line-height: 25px;
}

.upload input {
	display: block;
	width: 100%;
	height: 25px;
	opacity: 0;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
}

.upload label {
	display: block;
	width: 100%;
	height: 25px;
	text-align: center;
}

6、最后书写controller层的更新

//活动图片的删除
		activityImageService.deletes(Paramap.create().put("activityId" ,tActivity.getId()));
		//更新活动图片
		if(!StringUtil.isEmpty(imgPath)){
			String[] split=imgPath.split(",");
			ActivityImage activityImage=null;
			for(String string :split){
				activityImage=new ActivityImage();
				activityImage.setImage(string);
				activityImage.setActivityId(tActivity.getId());
				activityImageService.save(activityImage);
				
			}
		}