个人资料里边添加头像功能

src/main/java/com/stylefeng/guns/common/exception/BizExceptionEnum.java

@@ -20,6 +20,7 @@ public enum BizExceptionEnum {
 	 */
 	FILE_READING_ERROR(400,"FILE_READING_ERROR!"),
 	FILE_NOT_FOUND(400,"FILE_NOT_FOUND!"),
+	UPLOAD_ERROR(500,"上传图片出错"),
 
 	/**
 	 * 权限和数据问题

src/main/java/com/stylefeng/guns/modular/system/controller/UserMgrController.java

@@ -24,14 +24,13 @@ import org.apache.shiro.authc.AuthenticationException;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.validation.BindingResult;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
 
 import javax.annotation.Resource;
 import javax.naming.NoPermissionException;
 import javax.validation.Valid;
+import java.io.File;
 import java.util.Date;
 import java.util.List;
 import java.util.Map;
@@ -299,4 +298,18 @@ public class UserMgrController extends BaseController {
         this.managerDao.setRoles(userId, roleIds);
         return SUCCESS_TIP;
     }
+
+    /**
+     * 上传图片
+     * @return
+     */
+    @RequestMapping(method = RequestMethod.POST, path = "/upload")
+    public @ResponseBody String upload(@RequestPart("file") MultipartFile picture){
+        try {
+            picture.transferTo(new File("e:/tmp/" + picture.getOriginalFilename()));
+        } catch (Exception e) {
+            throw new BussinessException(BizExceptionEnum.UPLOAD_ERROR);
+        }
+        return "succesPic";
+    }
 }

src/main/webapp/WEB-INF/view/common/tags/avatar.tag

+@/*
+    头像参数的说明:
+    name : 名称
+    id : 头像的id
+@*/
+<div class="form-group">
+    <label class="col-sm-3 control-label head-scu-label">${name}</label>
+    <div class="col-sm-4">
+        <div id="${id}PreId">
+            <div><img width="100px" height="100px"
+                @if(isEmpty(avatarImg)){
+                      src="${ctxPath}/static/img/girl.gif"></div>
+                @}else{
+                      src="${ctxPath}/static/img/${avatarImg}"></div>
+                @}
+        </div>
+    </div>
+    <div class="col-sm-2">
+        <div class="head-scu-btn upload-btn" id="${id}BtnId">
+            <i class="fa fa-upload"></i>&nbsp;上传
+        </div>
+    </div>
+    <input type="hidden" id="${id}" />
+</div>
+@if(isNotEmpty(underline) && underline == 'true'){
+    <div class="hr-line-dashed"></div>
+@}
+
+

src/main/webapp/WEB-INF/view/system/user/user_view.html

@@ -16,6 +16,8 @@
 
                                 <div class="row">
                                     <div class="col-sm-6 b-r">
+                                        <#avatar id="avatar" name="头像" underline="true" avatarImg="boy.gif"/>
+
                                         <#input id="account" name="账户" underline="true" value="${user.account}" disabled="disabled" />
 
                                         <#select id="sex" name="性别" underline="true" value="${user.sex}">

src/main/webapp/static/modular/system/user/user_info.js

@@ -2,13 +2,13 @@
  * 用户详情对话框（可用于添加和修改对话框）
  */
 var UserInfoDlg = {
-	userInfoData : {}
+    userInfoData: {}
 };
 
 /**
  * 清除数据
  */
-UserInfoDlg.clearData = function() {
+UserInfoDlg.clearData = function () {
     this.userInfoData = {};
 };
 
@@ -18,7 +18,7 @@ UserInfoDlg.clearData = function() {
  * @param key 数据的名称
  * @param val 数据的具体值
  */
-UserInfoDlg.set = function(key, val) {
+UserInfoDlg.set = function (key, val) {
     this.userInfoData[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
     return this;
 };
@@ -29,14 +29,14 @@ UserInfoDlg.set = function(key, val) {
  * @param key 数据的名称
  * @param val 数据的具体值
  */
-UserInfoDlg.get = function(key) {
+UserInfoDlg.get = function (key) {
     return $("#" + key).val();
 };
 
 /**
  * 关闭此对话框
  */
-UserInfoDlg.close = function() {
+UserInfoDlg.close = function () {
     parent.layer.close(window.parent.MgrUser.layerIndex);
 };
 
@@ -48,7 +48,7 @@ UserInfoDlg.close = function() {
  * @param treeNode
  * @returns
  */
-UserInfoDlg.onClickDept = function(e, treeId, treeNode) {
+UserInfoDlg.onClickDept = function (e, treeId, treeNode) {
     $("#citySel").attr("value", instance.getSelectedVal());
     $("#deptid").attr("value", treeNode.id);
 };
@@ -58,12 +58,12 @@ UserInfoDlg.onClickDept = function(e, treeId, treeNode) {
  *
  * @returns
  */
-UserInfoDlg.showDeptSelectTree = function() {
+UserInfoDlg.showDeptSelectTree = function () {
     var cityObj = $("#citySel");
     var cityOffset = $("#citySel").offset();
     $("#menuContent").css({
-		left : cityOffset.left + "px",
-		top : cityOffset.top + cityObj.outerHeight() + "px"
+        left: cityOffset.left + "px",
+        top: cityOffset.top + cityObj.outerHeight() + "px"
     }).slideDown("fast");
 
     $("body").bind("mousedown", onBodyDown);
@@ -74,12 +74,12 @@ UserInfoDlg.showDeptSelectTree = function() {
  *
  * @returns
  */
-UserInfoDlg.showInfoDeptSelectTree = function() {
+UserInfoDlg.showInfoDeptSelectTree = function () {
     var cityObj = $("#citySel");
     var cityPosition = $("#citySel").position();
     $("#menuContent").css({
-        left : cityPosition.left + "px",
-        top : cityPosition.top + cityObj.outerHeight() + "px"
+        left: cityPosition.left + "px",
+        top: cityPosition.top + cityObj.outerHeight() + "px"
     }).slideDown("fast");
 
     $("body").bind("mousedown", onBodyDown);
@@ -88,7 +88,7 @@ UserInfoDlg.showInfoDeptSelectTree = function() {
 /**
  * 隐藏部门选择的树
  */
-UserInfoDlg.hideDeptSelectTree = function() {
+UserInfoDlg.hideDeptSelectTree = function () {
     $("#menuContent").fadeOut("fast");
     $("body").unbind("mousedown", onBodyDown);// mousedown当鼠标按下就可以触发，不用弹起
 };
@@ -96,7 +96,7 @@ UserInfoDlg.hideDeptSelectTree = function() {
 /**
  * 收集数据
  */
-UserInfoDlg.collectData = function() {
+UserInfoDlg.collectData = function () {
     this.set('id').set('account').set('sex').set('password')
         .set('email').set('name').set('birthday').set('rePassword').set('deptid').set('phone');
 };
@@ -104,12 +104,12 @@ UserInfoDlg.collectData = function() {
 /**
  * 验证两个密码是否一致
  */
-UserInfoDlg.validatePwd = function(){
+UserInfoDlg.validatePwd = function () {
     var password = this.get("password");
     var rePassword = this.get("rePassword");
-    if(password == rePassword){
+    if (password == rePassword) {
         return true;
-    }else{
+    } else {
         return false;
     }
 };
@@ -117,22 +117,22 @@ UserInfoDlg.validatePwd = function(){
 /**
  * 提交添加用户
  */
-UserInfoDlg.addSubmit = function() {
+UserInfoDlg.addSubmit = function () {
 
     this.clearData();
     this.collectData();
 
-	if(!this.validatePwd()){
+    if (!this.validatePwd()) {
         Feng.error("两次密码输入不一致");
         return;
     }
 
     //提交信息
-	var ajax = new $ax(Feng.ctxPath + "/mgr/add", function(data){
+    var ajax = new $ax(Feng.ctxPath + "/mgr/add", function (data) {
         Feng.success("添加成功!");
         window.parent.MgrUser.table.refresh();
         UserInfoDlg.close();
-	},function(data){
+    }, function (data) {
         Feng.error("添加失败!" + data.responseJSON.message + "!");
     });
     ajax.set(this.userInfoData);
@@ -142,17 +142,17 @@ UserInfoDlg.addSubmit = function() {
 /**
  * 提交修改
  */
-UserInfoDlg.editSubmit = function() {
+UserInfoDlg.editSubmit = function () {
 
     this.clearData();
     this.collectData();
 
     //提交信息
-	var ajax = new $ax(Feng.ctxPath + "/mgr/edit", function(data){
+    var ajax = new $ax(Feng.ctxPath + "/mgr/edit", function (data) {
         Feng.success("修改成功!");
         window.parent.MgrUser.table.refresh();
         UserInfoDlg.close();
-	},function(data){
+    }, function (data) {
         Feng.error("修改失败!" + data.responseJSON.message + "!");
     });
     ajax.set(this.userInfoData);
@@ -162,10 +162,10 @@ UserInfoDlg.editSubmit = function() {
 /**
  * 修改密码
  */
-UserInfoDlg.chPwd = function(){
-    var ajax = new $ax(Feng.ctxPath + "/mgr/changePwd", function(data){
+UserInfoDlg.chPwd = function () {
+    var ajax = new $ax(Feng.ctxPath + "/mgr/changePwd", function (data) {
         Feng.success("修改成功!");
-    },function(data){
+    }, function (data) {
         Feng.error("修改失败!" + data.responseJSON.message + "!");
     });
     ajax.set("oldPwd");
@@ -182,7 +182,7 @@ function onBodyDown(event) {
     }
 }
 
-$(function() {
+$(function () {
     var ztree = new $ZTree("treeDemo", "/dept/tree");
     ztree.bindOnClick(UserInfoDlg.onClickDept);
     ztree.init();
@@ -190,4 +190,8 @@ $(function() {
 
     //初始化性别选项
     $("#sex").val($("#sexValue").val());
+
+    // 初始化头像上传
+    var avatarUp = new $WebUpload("avatar");
+    avatarUp.init();
 });