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"></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 -->