<div class="layui-form-item">
<label class="layui-form-label">头像图片:</label>
<!--判断数据库中是否有数据,如果有则显示出来-->
<%if(article.imageUrl!=null&&article.imageUrl!=""){%>
<div style="display: inline-block">
<img src="${article.imageUrl}" width="100px">
<!--定义一个删除功能,可以删除上传的图片-->
<a class="layui-btn layui-btn-xs demo-reload deletexs">删除</a>
</div>
<%}%>
<!-- layui上传组件,通过该组件实现文件上传功能,当然需要js代码配合 -->
<!--当数据库有值时,通过jQury入口函数,隐藏这个组件,id的作用是为了在入口函数中识别这个组件-->
<div class="layui-upload-drag" id="uploadDiv">
<i class="layui-icon"></i>
</div>
</div>
用来配合的js代码,各部分功能见注释
这张图片中的两个input输入框,是为了取值,即将上传的图片url取出来存入数据库
最终的实现效果: