前台上传多张图片,保存在一个字段里前后端代码

<script type="text/javascript">
var urls;
layui.use(['form', 'layer'], function () {
    // 操作对象
    var form = layui.form
        , layer = layui.layer
        , $ = layui.jquery;
    
    $('#grage').val(0);	//初始加载默认好评
  //监听提交
    $("#postAdd").click(function(){
    	var content = $('#textarea').val();
    	if(content == ""){
    		layer.msg("提交内容不能为空");
    	}else{
	        $.ajax({
	            type: 'POST',
	            url: '#(ctxPath)/wmall/mobile/comment/comment',
	            data: $('#addForm').serialize(),
	            success : function(data){
	            	if(data.code=='0'){
	                	/* window.location.href = '#(ctxPath)/wmall/mobile/myCenter'; */
	                	window.history.go(-2);
	                }
	            }
	        });
    	}
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
  	//删除图片点击事件
    $(document).on('click','.button_img', function(obj) {
    	var url = $(this).prev().attr("src");
    	var newValue = $('#postImages').val().replace("|"+url,"").replace(url+"|","").replace(url,"");
    	document.getElementById('postImages').value = newValue;
    	var arryValue = $('#postImages').val().split("|");
    	$('#demo2').empty();
    	for (var i=0; i<arryValue.length; i++){
    		if(arryValue[i]!=""){
    			$('#demo2').append('<img src="'+ arryValue[i] +'" url="'+ arryValue[i] +'" class="layui-upload-img ">').append('<button   lay-submit lay-filter="*" class ="button_img delete"></button>')
    		}
    	}
    	if(arryValue.length<5){
    		$('#upload_img').show();
    	}
    });
    //增加好评点击事件
    $(document).on('click','.mui-control-item', function(obj) {
    	var grage = $(this).text();
    	switch(grage){
    	case "好评":
    		$('#grage').val(0);
    		break
    	case "中评":
    		$('#grage').val(1);
    		break
    	case "差评":
    		$('#grage').val(2);
    		break
    	}
    });
  
});
 

    layui.use('upload', function(){
        var $ = layui.jquery
        ,upload = layui.upload;
        
        //多图片上传
        upload.render({
          elem: '#upload_img'
          ,url: '/wmall/mobile/comment/postUpLoadImage'
          ,multiple: true
          ,number:5
          ,auto:true
          ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
            });
          }
        ,done: function(res){
            //如果上传失败
            if(res.code > 0){
              return layer.msg('上传失败');
            }else{
            	//上传成功
            	var path = $('#postImages').val();
            	$('#postImages').val(((path == null||path == "")?res.data:path +"|"+res.data));
            	$('#demo2').empty();
            	urls = $('#postImages').val().split("|");
            	if(urls.length==5){
            		$('#upload_img').hide();
            	}
            	for (var i=0; i<urls.length; i++){
            		if(urls[i]!=""){
            			$('#demo2').append('<img src="'+ urls[i] +'" url="'+ urls[i] +'" class="layui-upload-img"  >').append('<button   lay-submit lay-filter="*" class ="button_img delete"></button>')
            		}
            		
            	}
            }
          }
        });
        
    }); 
</script>

<script src="#(RESOURCE_HOST)/static/wmall-mobile/js/hui.js" type="text/javascript" charset="utf-8"></script>
<script src="#(RESOURCE_HOST)/static/wmall-mobile/js/hui-star.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//			textarea高度自适应开始
			function $(id) {
				return document.getElementById(id);
			}
			$("textarea").onkeyup = function() {
				this.style.height = 'auto';
				this.style.height = this.scrollHeight + "px";
			}
//			textarea高度自适应结束
			
//			星星点评开始
			var star1 = new huiStar('#star1');
			star1.starNum = 5;
			star1.color = '#D1D1D1';
			star1.colorActive = '#FF5E53';
			star1.size = 20;
			star1.change = function(starVal) {
				hui.toast(starVal + '星');
			}
			star1.draw();
			
			var star2 = new huiStar('#star2');
			star2.starNum = 5;
			star2.color = '#D1D1D1';
			star2.colorActive = '#FF5E53';
			star2.size = 20;
			star2.change = function(starVal) {
				hui.toast(starVal + '星');
			}
			star2.draw();
			
			var star3 = new huiStar('#star3');
			star3.starNum = 5;
			star3.color = '#D1D1D1';
			star3.colorActive = '#FF5E53';
			star3.size = 20;
			star3.change = function(starVal) {
				hui.toast(starVal + '星');
			}
			star3.draw();
//			星星点评开始
		</script>
#end
    
#define content()
		<!--header-开始-->
		<form id="addForm" class="layui-form" action="">
		<header class="header header-shopping">
			<a class="header-back" href="javascript:history.go(-1)"><i class="iconfont icon-back_light"></i></a>
			<h1 class="mui-title">发表评价</h1>
			<button type="button" class="header-right-word" lay-filter="sub" lay-submit id="postAdd">发布</button>
		</header>
		<div class="header-kong"></div>
		<!--header-结束-->
		
		<!--选项开始-->
		<div class="news-comment">
			<div class="news-comment-img">
				<img src="#(commodityImg)"/>
			</div>
			<div id="segmentedControl" class="mui-segmented-control tab-page">
				<a class="mui-control-item mui-active"><i class="iconfont icon-haoping"></i>好评</a>
				<a class="mui-control-item"><i class="iconfont icon-zhongping"></i>中评</a>
				<a class="mui-control-item"><i class="iconfont icon-iconfontchaping"></i>差评</a>
			</div>
		</div>
		<div style="height: 60px;"></div>
		<!--选项结束-->
		<div class="textarea-wk">
			<textarea id="textarea" class="textarea" rows="3" name="content" placeholder="宝贝满意吗？说说你的使用心得吧" required="required"></textarea>
			<input type="hidden" name="grade" id="grage">
			<input type="hidden" name="indentCommodityId" value=#(indentCommodityId)>
			<input type="hidden" name="commodityId" value=#(commodityId)>
			<!--图片上传开始-->
			<div class="layui-upload star-dwk">
			  <button type="button" class="weui-uploader__input-box" id="upload_img" style="width: 76px;height: 76px;float:none;margin-right: 2px;margin-bottom: 6px;"></button>
			  <input type="hidden" name="images" id="postImages"> 
			  <!-- <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			    预览图： -->
			    <span class="layui-upload-list" id="demo2"></span>
			 <!-- </blockquote> -->
			</div>
			<!--图片上传结束-->
		</div>
		
		<div class="hui-wrap star-dwk">	
			<h1>店铺评分</h1>
			<div class="star-wk">
				<p class="star-p">描述相符</p>
				<div id="star1" style="line-height: 30px;"></div>
			</div>
			<div class="star-wk">
				<p class="star-p">服务态度</p>
				<div id="star3" style="line-height: 30px;"></div>
			</div>
			<div class="star-wk">
				<p class="star-p">物流服务</p>
				<div id="star2" style="line-height: 30px;"></div>
			</div>
		</div>
		</form>

#end

	public void postUpLoadImage() {
		StringBuilder json = new StringBuilder("{   \"errno\": 1   ,\"data\": [  ");
		if (isMultipartRequest()) {
			try {
				Map<String, UploadFile> fileMap = getUploadFilesMap();
				json = new StringBuilder("{  \"errno\": 0 ,\"data\": [");
				for (UploadFile file : fileMap.values()) {
					json.append("\"").append("/upload/").append(file.getFileName()).append("\",");
				}
			} catch (Exception e) {
				logger.error("图片上传失败："+e.getMessage(), e);
			} finally {
				renderJson(json.substring(0, json.length() - 1) + "]}");
			}

		}
	}
	public void comment() {
		User user = AuthUtils.getLoginUser();
		CommodityEvaluate comment = new CommodityEvaluate();
		comment.setCommodityId(getParaToLong("commodityId"));
		comment.setIndentCommodityId(getParaToLong("indentCommodityId"));
		comment.setUserId(user.getId());
		comment.setImage(getPara("images"));
		comment.setContent(getPara("content"));
		comment.setGrade(getParaToInt("grade"));
		comment.setCreateTime(new Date());
		comment.setCreateBy(user.getId().toString());
		commentService.save(comment);
		IndentCommodity indentCommodity = indentCommodityService.findById(getParaToLong("indentCommodityId"));
		indentCommodity.setDelFlag("1");
		indentCommodity.setCreateTime(new Date());
		indentCommodityService.update(indentCommodity);
		renderJson(RestResult.buildSuccess());
	}

	/**
	 * 跳转我的所有评价页面
	 */
	public void myComment() {
		User user = AuthUtils.getLoginUser();
		List<CommodityEvaluate> myCommentList = commentService.findAllByUserId(user.getId());
		if (myCommentList.size() > 0) {
			for (CommodityEvaluate CommodityEvaluateList : myCommentList) {
				String arrImage = CommodityEvaluateList.getImage();
				if (!StrUtils.isBlank(arrImage)) {
					arrImage = CommodityEvaluateList.getImage().replace("|", " ");
					String[] arrImages = arrImage.split(" ");
					List<String> list = new ArrayList<String>();
					for (int i = 0; i < arrImages.length; i++) {
						list.add(arrImages[i]);
					}
					CommodityEvaluateList.setListImage(list);
				}
				String addArrImage = CommodityEvaluateList.getAddCommentImage();
				if (!StrUtils.isBlank(addArrImage)) {
					addArrImage = CommodityEvaluateList.getAddCommentImage().replace("|", " ");
					String[] addArrImages = addArrImage.split(" ");
					List<String> listAdd = new ArrayList<String>();
					for (int i = 0; i < addArrImages.length; i++) {
						listAdd.add(addArrImages[i]);
					}
					CommodityEvaluateList.setAddListImage(listAdd);
				}
			}
			setAttr("myCommentList", myCommentList);
		} else {
			setAttr("myCommentList", null);
		}
		render("myComments.html");
	}

上面的代码应该还可以在优化,上传成功以后#demo不用清空,判断一下之前时候有值,如果有值则|+res.data,如果没有值则直接res.data

跳转我的所有评价页面是保存在一个字段中的图片前台展示的时候分割的方法;