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