前面一篇博客《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;%><!DOCTYPE html><html><head><title>修改头像</title><link rel="stylesheet" href="<%=basePath%>/css/main.css"><script type="text/javascript" src="<%=basePath%>/js/ajaxfileupload.js"></script></head><body style="width: 200px; height: 600px"><div class="panel-content" style=""><div class="locate"><section class="content-header" style=""><div class="title" style=""><i style="color:#1890ff;" class="${m_icon}"></i> 修改头像</div><ol class="breadcrumb" style="padding-top:0px"><li class="active">当前位置：账号设置</li><li class="active">账号修改</li><li>修改头像</li></ol></section><section class="content container-fluid"><div class="row"><div class="col-md-3"><div class="control-label">请上传新头像：</div><div style="text-align:left; width: 100px; height: 100px;" id="user_profile_new"><a href="javascript:void(0);" onclick="showUploadDialog(this);"><imgsrc="<%=basePath%>/image/image_placeholder_square.png" id="newProfile" alt="当前用户新上传头像"style="width:100%; height:100%;margin-top: 20px;"></a></div></div><div class="col-md-3"><div class="control-label">当前头像：</div><div style="text-align:left;" id="user_profile_old"><img src="<%=basePath%>/user/getProfileInImage" id="oldProfile" alt="当前用户头像"style="width:100px; height:100px; margin-top: 20px;"></div></div></div><div class="row" style="margin-top:40px;"><input class="col-md-3" type="file" accept=".jpg,.jpeg,.png" name="profileFile" id="fcupload"onchange="readURL(this);" value="上传新头像" style="display: none;"/><div class="col-md-3" style=""><a class="btn btn-primary btn-sm" id="submit_btn"style="margin-top: -2px;"><i class="fa fa-upload"></i> 开始上传</a></div></div><div class="row" style="margin-top:8px;"><div class="col-md-6" style="margin-left:10px;"><small style="color:red;">上传文件格式：jpg/jpeg/png, 文件大小不超过100KB, 推荐尺寸：100*100px</small></div></div></section></div></div></body></html>
当然还少不了JavaScript脚本：
<script>function showUploadDialog(e) {$("#fcupload").click();}var objUrl;function readURL(input) {if (input.files && input.files[0]) {if (input.files[0].type == "image/jpg"|| input.files[0].type == "image/jpeg" || input.files[0].type == "image/png") {var byteSize = input.files[0].size / 1024;//文件大小不超过100KBif (byteSize <= 100) {objUrl = getObjectURL(input.files[0]);console.log('objUrl： ' + objUrl);if (objUrl) {$("#newProfile").attr("src", objUrl); //将图片路径存入src中，显示出图片}} else {alert("文件大小超出, 实际大小: " + byteSize + " KB");}} else {alert("文件类型不对: " + input.files[0].type);}} else {alert("请选择头像");}}//图片上传$("#submit_btn").click(function () {var imgUrl = $('#fcupload').val();if (imgUrl == undefined || imgUrl == '') {alert('未选择头像, 请先选择头像再上传！');return;}$.ajaxFileUpload({url: '<%=basePath%>/user/updateHeadPic',type: 'post',fileElementId: "fcupload", //文件上传域的ID，这里是input的ID，而不是img的dataType: 'json', //返回值类型 一般设置为jsoncontentType: "application/x-www-form-urlencoded; charset=utf-8",async: 'false',success: function (data) {alert(data.msg);if (data.code == '0') {$("#oldProfile").attr('src', objUrl);}}});});//建立一個可存取到該file的urlfunction getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}</script>
二、本篇小结
总的来说，上传头像前端部分比后端更复杂一点，需要控制上传文件的格式和文件大小。
更多交流，欢迎关注公众号「小白轻松学编程」留言。
