SSM整合之企业级后台管理系统(18) - 上传头像前端部分

前面一篇博客《SSM整合之企业级后台管理系统(17) - 上传头像后端部分》介绍了上传头像实现的思路和后端代码，由于篇幅原因呢，把前后端分开介绍。

所以，这篇博客我们来学习一下上传头像的前端实现。

先看看功能演示（点击放大）：

一、相关代码

首先要在菜单中增加一个“修改头像”的菜单，这个菜单我是放在【账号设置】->【账号管理】中（放在哪个菜单下可以自己定），具体如何实现菜单在《SSM整合之企业级后台管理系统(11) - 实现主页中的顶部菜单和左侧菜单》这篇博客有介绍。

接着，设计前端页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>



    
    
    



    

        

            
 修改头像
            

                
当前位置：账号设置
                
账号修改
                
修改头像
            
        
        

            

                

                    
请上传新头像：
                    

                        
                    
                
                

                    
当前头像：
                    

                        
                    
                
            
            

                
                
 开始上传
            
            

                

                    上传文件格式：jpg/jpeg/png, 文件大小不超过100KB, 推荐尺寸：100*100px
                
            
        
    

当然还少不了JavaScript脚本：

二、本篇小结

总的来说，上传头像前端部分比后端更复杂一点，需要控制上传文件的格式和文件大小。

更多交流，欢迎加群（584017112）：

上一篇：SSM整合之企业级后台管理系统(17) - 上传头像后端部分

下一篇：SSM整合之企业级后台管理系统(18) - 修改登录密码