uploadImg.lview 5.2 KB
<?xml version="1.0" encoding="UTF-8"?>
<!--
    $Author: zsy
    $Date: 2018/12/18
    $Revision:
    $Purpose: 头像上传
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure>
        <a:model-query model="sys.sys_user" rootPath="enable_image_system_flag"/>
    </a:init-procedure>
    <a:view package="leaf.ui.std" template="default">
        <script src="${/request/@context_path}/leafresource/js/cropper.min.js"
                type="text/javascript"></script>
        <link href="${/request/@context_path}/leafresource/css/cropper.min.css" rel="stylesheet"
              type="text/css"/>
        <style>
            #userImg {
                width: 300px;
                height: 300px;
            }

            #preview {
                width: 200px;
                height: 200px;
                overflow: hidden;
            }

            #saveImg {
                cursor: pointer;
                float: right;
                width: 108px;
                height: 38px;
                background-color: rgba(90, 127, 255, 1);
                font-size: 14px;
                color: #FFFFFF;
                text-align: center;
                line-height: 38px;
            }
        </style>
        <script><![CDATA[
            var options = {
                aspectRatio: 1 / 1,
                preview: "#preview",
                viewMode: 1
            };
            var cropper;
            var $image = document.getElementById('userImg');

            $L.onReady(function () {
                Leaf.Masker.mask($('${/parameter/@win_id}').wrap, '正在加载头像...');
                Leaf.request({
                    url: "${/request/@context_path}/autocrud/sys.sys_user/query",
                    para: {
                        user_id: "${/session/@user_id}"
                    },
                    scope: this,
                    success: function (res) {
                        if (res.success) {
                            var userImg = '';
                            if (!!res.result.record.avatar) {
                                userImg = res.result.record["avatar"];
                            } else {
                                userImg = "${/request/@context_path}/lib/assets/layouts/layout4/img/avatar_default.png";
                            }
                            document.getElementById('userImg').src = userImg;
                        }
                        cropper = new Cropper($image, options);
                        Leaf.Masker.unmask($('${/parameter/@win_id}').wrap);
                    }
                });

                jQuery("#selectImg").on("change", function (e) {
                    var selectImg = e.currentTarget;
                    var file = selectImg.files[0];
                    if (/(.jpg)|(.jpeg)|(.png)|(.gif)|(.svg)$/.test(file.name)) {
                        // if(window.File && window.FileList && window.FileReader && window.Blob) {
                        if (window.FileReader) {
                            var fileReader = new window.FileReader();
                            fileReader.readAsDataURL(file);
                            fileReader.onload = function (e) {
                                $image.src = this.result;
                                cropper.destroy();
                                cropper = new Cropper($image, options);
                            };
                        }
                    } else {
                        $L.showErrorMessage("提示", "仅支持gif,jpeg,jpg,png,svg类型的图片", null, 200, 100);
                    }
                });

                jQuery("#saveImg").on("click", function () {
                    Leaf.Masker.mask($('${/parameter/@win_id}').wrap, '正在上传');
                    var result = cropper.getCroppedCanvas();
                    var avatar = result.toDataURL("image/jpeg");
                    Leaf.request({
                        url: "${/request/@context_path}/autocrud/sys.change_image/update",
                        para: {
                            user_id: "${/session/@user_id}",
                            avatar: avatar
                        },
                        scope: this,
                        success: function (res) {
                            if (res.success) {
                                Leaf.Masker.unmask($('${/parameter/@win_id}').wrap);
                                $L.showInfoMessage("提示", "头像上传成功", function () {
                                    $('${/parameter/@win_id}').close();
                                }, 200, 100);
                            }
                        }
                    });
                });
            });
            ]]></script>
        <a:screenBody>
            <a:hBox>
                <lable for="selectImg" class="imgTitle">选择图片</lable>
                <input type="file" id="selectImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
            </a:hBox>
            <a:hBox>
                <img id="userImg"/>
                <a:vBox>
                    <div id="preview"></div>
                    <div id="saveImg">保存</div>
                </a:vBox>
            </a:hBox>
        </a:screenBody>
    </a:view>
</a:screen>