Layui+ssm实现头像上传功能

最新推荐文章于 2024-03-27 15:31:19 发布

原创

最新推荐文章于 2024-03-27 15:31:19 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#java #spring #springMVC #mybatis #mysql

本文介绍了如何结合Layui前端框架和SSM（Spring、SpringMVC、Mybatis）后端框架实现头像上传功能。首先阐述了实现思路，即上传图片至服务器，并保存图片地址到数据库。接着详细讲解了Layui中上传头像的模态框、修改头像按钮及其监听事件，以及后端的ApplicationContext.xml配置和Controller部分的处理逻辑。

Layui前端部分

实现思路

现将头像即图片上传到服务器文件夹中（即项目工程中），然后将图片所在的地址存储到数据库中，然后用户登录之后从数据库中读取头像地址。

上传头像功能弹出的模态框（即上传头像的表单）

<%--修改头像表单--%>
<form class="layui-form layui-form-panel" id="uploadform" name="uploadform" enctype="multipart/form-data" method="post"
      style="display: none;" lay-filter="first2">
    <div class="layui-form-item">
        <label class="layui-form-label">头像封面</label>
        <div class="layui-upload-drag" id="demo1">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <hr>
            <img class="layui-upload-img" id="demo2" style="max-width: 100px">
        </div>
    </div>
    <!--lay-submit lay-filter="submitBut"必须要有-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <!--  提交按钮 -->
            <button class="layui-btn" lay-submit lay-filter="submitBut