前面一篇博客《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);"><img
src="<%=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;
//文件大小不超過100KB
if (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', //返回值類型 一般設置爲json
contentType: "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的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
二、本篇小結
總的來說，上傳頭像前端部分比後端更復雜一點，需要控制上傳文件的格式和文件大小。
更多交流，歡迎加羣（584017112）：
上一篇：SSM整合之企業級後臺管理系統(17) - 上傳頭像後端部分
下一篇：SSM整合之企業級後臺管理系統(18) - 修改登錄密碼