1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<?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>