用layui 模板，数据表格展示 图片,

    <script>
    layui.use(['tree', 'util','upload','table'], function(){
      var upload = layui.upload;
      var tree = layui.tree
      ,layer = layui.layer
      ,util = layui.util
      ,table = layui.table;
      
      //第一个实例
      table.render({
    elem: '#demo'
    ,height: 312
    ,url: '${ctxPath}/upc/json' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'url', title: '图片', width: 135,templet:"#imgtemp"}
    ]]
      });
      
      //普通图片上传
      var uploadInst = upload.render({
    elem: '#test1'
    ,url: '${ctxPath}/upc/upload'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      else
    {
    	
    	  console.log("success");
    }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
      });
      
    });
    </script>
     <!-- 定义图像模板 d为filed中的返回参数,url为后台中每一组元素的url -->
     <script type="text/html" id="imgtemp">
    	<div><img src="{{d.url}}" style="width:20px;height:20px"></div>
    </script>
    
    <table id="demo" lay-filter="tdemo"></table>

    <div class="layui-upload">
      <button type="button" class="layui-btn" id="test1">上传图片</button>
      <div class="layui-upload-list">
    <img class="layui-upload-img" style="width:100px;height:100px" id="demo1">
    <p id="demoText"></p>
      </div>
    </div>

      /** * 上传用户头像，并保存
     * @param request
     * @return
     * @throws Exception
     */
    @ResponseBody
    	@RequestMapping(value="upload",method=RequestMethod.POST)
    	public Map<String,Object> upString(HttpServletRequest request) throws Exception{
    		System.out.println("up");
    		Map<String,Object> resultMap=new LinkedHashMap<String, Object>();
    		Map<String,Object> Map=new LinkedHashMap<String, Object>();
    		List<Map<String,Object>> listMap = new ArrayList<Map<String,Object>>();
    		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    		Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();//文件集合
    //			if(!file.isEmpty()){
    				//上传文件路径
    				//String path=request.getSession().getServletContext().getRealPath("/imag");//F:\eclipse\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\wood\imag\dayuan.jpg
    				//山传到相对路径
    				String path ="F:/eclipse/dayuan/imag";
    				System.err.println(path);
    				// 检查目录
    				File uploadDir = new File(path);
    				if (!uploadDir.isDirectory()) {
    					// 如果不存在，创建文件夹
    					if (!uploadDir.exists()) {
    						uploadDir.mkdirs();
    					}
    				}
    				
    				for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
    					SimpleDateFormat df2 = new SimpleDateFormat("yyyyMMddHHmmss");
    					String date=df2.format(new Date());
    					System.err.println(date+"当前时间");
    					MultipartFile file2=entity.getValue();
    					String filename=file2.getOriginalFilename();
    				
    					File filepath=new File(path,filename);
    				//判断路径是否存在，如果不存在就创建一个
    					if(!filepath.getParentFile().exists()){
    						filepath.getParentFile().mkdirs();
    					}
    				//重命名
    				// 扩展名
    				String fileExt = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();//扩展名
    				Date date2=df2.parse(date);
    				//新的文件名
    				String newFileName=date+"_"+new Random().nextInt(100)+"."+fileExt;
    				System.err.println("新文件名："+newFileName);
    				//保存的路径
    				String Savepath="/imag/"+newFileName;
    				System.out.println("存储路径"+Savepath);
    				//保存图片数据
    				//将上传的文件保存到目标文件中
    				file2.transferTo(new File(path+File.separator+newFileName));
    				//图片url
    				String url = "/upload/"+newFileName;
    				System.out.println(path+File.separator+filename);
    				//保存图片
    				Userimage image = new Userimage();
    				image.setId(1L);
    				image.setUrl(url);
    				imgService.insert(image);
    				resultMap.put("code",0);
    				resultMap.put("msg","");
    				resultMap.put("count", 10);
    				Map.put("src",url);
    				listMap.add(Map);
    				resultMap.put("data",listMap);
    			}
    			return resultMap;
    	}
    
    
    
    @ResponseBody
    	@RequestMapping("json")
    public String toJson(Integer page,Integer limit)
    {
    		Map<String,Object> resultMap=new LinkedHashMap<String, Object>();
    		Map<String,Object> Map=new LinkedHashMap<String, Object>();
    		List<Map<String,Object>> listMap = new ArrayList<Map<String,Object>>();
    		Page<Userimage> page2 ;
    		EntityWrapper<Userimage> wrapper = new EntityWrapper<>();
    		wrapper.orderBy("id ASC");
    		
    		if(page==0||limit==0)
    		{
    			page2 = getPage();
    		}
    		else {
    			//换页
    			page2 = new Page(page,limit);
    		}
    		Page<Userimage> pageUser = imgService.selectPage(page2,wrapper);
    		String jsonR=Json.encode(Response.dt(pageUser));
    	    return jsonR;
    }