在新增页面中实现多张图片的上传

1、基本样式的导入

<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>
	

2、添加上传图片的按钮

<div class="col-sm-12">
                       			 	<label class="col-sm-3 control-label">活动图片</label>
	                                <div class="col-sm-6">
	                               <ul id="imageShow" class="form-group"></ul>
	                                	<div class="upload" id="upload">
											<label id="uploadGroup">上传<input type="file" id="fileGroup"/></label>
										</div>
	                                    <input type="hidden" name="imgPath" id="imgPath"  />
	                                 </div>   
                       			</div>

3、图片的上传

//活动图片
        var 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("");
	    					$('#upload').removeClass();
						}
    					imgUrl.push(data.object);
    					console.log("数据"+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("");
        		$('#upload').addClass("upload");
        		$('#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、因为活动图片是存在另一张表中，所以需要先保存活动表中的数据，得到最大的id值（即最近增加的数据）

/**
	 * 保存
controller层
	 */
	@RequestMapping(value = "/save", method = RequestMethod.POST)
	public String save(TActivity tActivity, RedirectAttributes redirectAttributes,String imgPath) {
		   tActivityService.save(tActivity);
		   //得到新增活动数据的id
		   TActivity getMaxModel=tActivityService.getMaxId();
		     //获得这条数据的id
		   Long id=getMaxModel.getId();
				//活动图片
				if(!StringUtil.isEmpty(imgPath)){
					String[] split=imgPath.split(",");
					ActivityImage activityImage=null;
					for(String string :split){
						activityImage=new ActivityImage();
						activityImage.setImage(string);
						activityImage.setActivityId(id);
						activityImageService.save(activityImage);
					}
				}
		addFlashMessage(redirectAttributes, SUCCESS_MESSAGE);
		return "redirect:list.jhtml";
	}



service层
     //得到活动中的最大值
		public TActivity getMaxId();
serviceimpl层

@Override
	//获得最近添加的活动数据
	public TActivity getMaxId() {
		return tActivityDao.getMaxId();
	}
	

dao层
TActivity getMaxId();

sql语句
 
		<!-- Long getMaxId(); -->
		<select id="getMaxId" resultMap="TActivityResultMap">
		   SELECT
				*
			FROM
				t_activity
			ORDER BY
				ID DESC
			LIMIT 0,
			 1;
		</select>