jjhc
/
train


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<!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>
                        <br><br>
                        <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 () {
                            $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>