图片上传，图片显示list

layui图片上传

html页面代码

<div class="layui-form-item">
	<label class="layui-form-label"><span style="color: red;">*</span>图片</label>
		<!-- 开始 -->
		<div class="layui-input-inline">
			<!-- 按钮 -->
			<button type="button" class="layui-btn" id="test1">
				<i class="layui-icon">&#xe67c;</i>上传图片
			</button>
			<!--图片地址-->
			<img id="imgFace" style=" width:120px" src=""/>
			<!-- 存地址-->
			<input type="hidden" name="imgUrl" id="imgUrl" required lay-verify="required" autocomplete="off" class="layui-input">
		</div>
<!-- 结束 -->
</div>

script代码

var upload = layui.upload;
	//执行实例
	var uploadInst = upload.render({
		elem: '#test1' //绑定元素butto按钮的id
		,url: '/wk3un1/HouaboutServlet?method=upload' //上传接口
		,done: function(res){
			//上传完毕回调
			$("#imgUrl").val('upload1/'+res.data);//input框的值
			$("#imgFace").attr('src','/wk3un1/upload1/'+res.data);//img得值
			}
	});

数据表格展示图片

html代码

<script type="text/html" id="imgtmp">
	<img src="../{{d.imgUrl}}"  style="width: 500px;height:100px;"/>
	//或是第二种<img class="img_sp" src="{{d.proImg}}"  style="display: flex; max-width: 70px;"/>
</script>
<!-- 渲染 -->
[{
	field : 'imgUrl',
	title : '图片',
	width : 180,
	height : 30,
	align : 'center',
	templet : '#imgtmp'
}],
<!-- 渲染 第二种js的代码began-->
 done: function (res, curr, count) {
         // 如果有使用到下拉筛选，这句话必须要
          soulTable.render(this)
          hoverOpenImg();//显示大图
          $('table tr').on('click', function () {
              $('table tr').css('background', '');
              $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
          });
      },
 function hoverOpenImg() {
        var img_show = null; // tips提示
        $('td img').hover(function () {
            var kd = $(this).width();
            kd1 = kd * 4;          //图片放大倍数
            kd2 = kd * 4 + 30;       //图片放大倍数
            var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;' />";
            img_show = layer.tips(img, this, {
                tips: [2, 'rgba(41,41,41,.5)']
                , area: [kd2 + 'px']
            });
        }, function () {
            layer.close(img_show);
        });
        $('td img').attr('style', 'max-width:70px;display:block!important');
    }
<!-- 渲染js结束end -->
<!--样式--->
<style>
      .layui-table-cell {
          height: 100%;
          max-width: 100%;
      }
</style>

第二种，鼠标放上去可以放大

<!-- 渲染第二种 -->
```html
<script type="text/html" id="imgtmp">
<img class="img_sp" src="{{d.proImg}}"  style="display: flex; max-width: 70px;"/>
</script>
<!-- 渲染 -->
[{
	field : 'imgUrl',
	title : '图片',
	width : 180,
	height : 30,
	align : 'center',
	templet : '#imgtmp'
}],
<!-- 渲染 js的代码began-->
 done: function (res, curr, count) {
         // 如果有使用到下拉筛选，这句话必须要
          soulTable.render(this)
          hoverOpenImg();//显示大图
          $('table tr').on('click', function () {
              $('table tr').css('background', '');
              $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
          });
      },
 function hoverOpenImg() {
        var img_show = null; // tips提示
        $('td img').hover(function () {
            var kd = $(this).width();
            kd1 = kd * 4;          //图片放大倍数
            kd2 = kd * 4 + 30;       //图片放大倍数
            var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;' />";
            img_show = layer.tips(img, this, {
                tips: [2, 'rgba(41,41,41,.5)']
                , area: [kd2 + 'px']
            });
        }, function () {
            layer.close(img_show);
        });
        $('td img').attr('style', 'max-width:70px;display:block!important');
    }
<!-- 渲染js结束end -->