项目保存头像页面

<!-- 页头 -->
<#assign pageTitle="设置头像">
<#include "/default/commons/header.ftl">


<style>
.container.imgcrop input.btn {border:0;background:#ff4400;padding:8px 20px;font-size:14px;color:#fff;letter-spacing:4px;cursor:pointer;outline:none;margin:10px 0;display:block;border-radius:3px;}
</style>

<div id="content-container" class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="list-group-block">
            <div class="list-group-panel">
              <div class="list-group-heading">帐号设置</div>
              <ul class="list-group">
                
                <a class="list-group-item " href="/secure/setting/basic"><i class="glyphicon glyphicon-user"></i> 基础信息</a>
                
                <a class="list-group-item active" href="/secure/setting/avatar"><i class="glyphicon glyphicon-picture"></i> 头像设置</a>
                
                <a class="list-group-item " href="/secure/setting/password"><i class="glyphicon glyphicon-lock"></i> 密码修改</a>
                
              </ul>
            </div>
          </div><!-- /list-group-block -->
        </div>

      </div>
    </div>
    <div class="col-md-9">
      <div class="panel panel-default panel-col">
        <div class="panel-heading">头像</div>
        <div class="panel-body">
          <form id="settings-avatar-form" class="form-horizontal" method="post" novalidate="novalidate" data-widget-cid="widget-0">

            <div id="onSuccessDiv" class="alert alert-success" style="display:none"><i class="glyphicon glyphicon-saved"></i> 头像信息已保存。</div>
            <div id="onFailureDiv" class="alert alert-danger" style="display:none"><i class="glyphicon glyphicon-remove"></i> <span id="errorMsg"></span></div>

            <div class="form-group">
              <div class="col-md-2 control-label"><b>当前头像</b></div>
              <div class="controls col-md-8 controls" id="avatar-container">
                <#if (user.avatar)?has_content >
                  <img src="${(user.avatar)!'#'}">                  
                <#else>
                  <img src="/resources/assets/img/default/avatar.png?1.5.3">
                </#if>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-2 control-label">
                <label for="form_avatar" class="required">新头像</label>
              </div>
              <div class="controls col-md-8 controls">
                <button type="button" class="btn btn-primary" id="form_avatar" uimg="parent.input[name=avatar]" uimgDisplay="parent.div[id=avatar-container]">上传头像</button>
                <p class="help-block">您可以上传JPG、GIF或PNG格式的文件，文件大小不能超过<strong>21.0MB</strong>。</p>
              </div>
            </div>
            
            <input type="hidden" name="avatar" value="${(user.avatar)!''}" />

            <div class="form-group">
              <div class="col-md-2 control-label"></div>
              <div class="controls col-md-8 controls">
                <button type="submit" class="btn btn-primary">保存</button>
              </div>
            </div>
            
          </form>



        </div>
      </div>  </div>
    </div>
  </div>

<#-- 页脚开始 -->
<#include "/default/commons/footerBegin.ftl">

<link href="/resources/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" rel="stylesheet" />
<script src="/resources/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.js"></script>

<script>
$(document).ready(function(){
    $('#settings-avatar-form').ajaxForm(function(jsonResult) {
          if('success' == jsonResult.status) {
                Notify.success('保存成功');
            } else {
                Notify.danger(jsonResult.errorMsg, "error");
            }
    }); 

	$("[uimg]").uimg();
});
</script>

<#-- 页脚结束 -->
<#include "/default/commons/footerEnd.ftl">