<!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>