147 lines
5.0 KiB
HTML
147 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>{$site_info.site_name}</title>
|
|
<meta name="keywords" content=""/>
|
|
<meta name="description" content="">
|
|
<include file="public@head"/>
|
|
<style type="text/css">
|
|
.tab-content {
|
|
overflow: visible;
|
|
}
|
|
|
|
.uploaded_avatar_area {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.uploaded_avatar_btns {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.uploaded_avatar_area .uploaded_avatar_btns {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="body-white" id="top">
|
|
<include file="public@nav"/>
|
|
|
|
<div class="container tc-main">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<include file="public@usernav"/>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div class="tabs">
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a href="#one" data-toggle="tab"><i class="fa fa-user"></i> 修改头像</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="one">
|
|
<br>
|
|
<if condition="empty($avatar)">
|
|
<img src="__TMPL__/public/assets/images/headicon_128.png" class="headicon" width="128"/>
|
|
<else/>
|
|
<img src="{:cmf_get_user_avatar_url($avatar)}?t={:time()}" class="headicon" width="128"/>
|
|
</if>
|
|
<input type="file" onchange="avatar_upload(this)" id="avatar_uploder" name="file"/>
|
|
<div class="uploaded_avatar_area">
|
|
<div class="uploaded_avatar_btns">
|
|
<a class="btn btn-primary confirm_avatar_btn" onclick="update_avatar()">确定</a>
|
|
<a class="btn" onclick="reloadPage()">取消</a>
|
|
</div>
|
|
</div>
|
|
<p class="help-block">头像支持jpg,png,jpeg格式,文件大小最大不能超过1M</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<include file="public@footer"/>
|
|
|
|
</div>
|
|
<!-- /container -->
|
|
|
|
<include file="public@scripts"/>
|
|
<script type="text/javascript">
|
|
function update_avatar() {
|
|
var area = $(".uploaded_avatar_area img").data("area");
|
|
$.post("{:url('Profile/avatarUpdate')}", area, function (data) {
|
|
if (data.code == 1) {
|
|
reloadPage(window);
|
|
}
|
|
|
|
}, "json");
|
|
|
|
}
|
|
function avatar_upload(obj) {
|
|
var $fileinput = $(obj);
|
|
/* $(obj)
|
|
.show()
|
|
.ajaxComplete(function(){
|
|
$(this).hide();
|
|
}); */
|
|
Wind.css("jcrop");
|
|
Wind.use("ajaxfileupload", "jcrop", "noty", function () {
|
|
$.ajaxFileUpload({
|
|
url: "{:url('Profile/avatarUpload')}",
|
|
secureuri: false,
|
|
fileElementId: "avatar_uploder",
|
|
dataType: 'json',
|
|
data: {},
|
|
success: function (data, status) {
|
|
|
|
if (data.code == 1) {
|
|
$("#avatar_uploder").hide();
|
|
var $uploaded_area = $(".uploaded_avatar_area");
|
|
$uploaded_area.find("img").remove();
|
|
var src = "__ROOT__/upload/" + data.data.file;
|
|
var $img = $("<img/>").attr("src", src);
|
|
$img.prependTo($uploaded_area);
|
|
$(".uploaded_avatar_btns").show();
|
|
var img = new Image();
|
|
img.src = src;
|
|
|
|
var callback = function () {
|
|
console.log(img.width);
|
|
$img.Jcrop({
|
|
aspectRatio: 1,
|
|
trueSize: [img.width, img.height],
|
|
setSelect: [0, 0, 100, 100],
|
|
onSelect: function (c) {
|
|
$img.data("area", c);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (img.complete) {
|
|
callback();
|
|
} else {
|
|
img.onload = callback;
|
|
}
|
|
|
|
} else {
|
|
noty({
|
|
text: data.msg,
|
|
type: 'error',
|
|
layout: 'center',
|
|
callback: {
|
|
afterClose: function () {
|
|
reloadPage(window);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
},
|
|
error: function (data, status, e) {
|
|
}
|
|
});
|
|
});
|
|
|
|
return false;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |