style(jinja2):修改模板的复用方式
This commit is contained in:
zhengxinonly
@@ -1,127 +1,127 @@
|
||||
{% extends 'admin/base.html' %}
|
||||
|
||||
{% block title %}
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<title>头像上传</title>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-xs9">
|
||||
<div style="height:325px;background-color: rgb(247, 247, 247);">
|
||||
<img id="sourceImage" src="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs3" style="padding-left:0px;">
|
||||
<div id="previewImage"
|
||||
style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
|
||||
</div>
|
||||
{% include 'admin/common/header.html' %}
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-xs9">
|
||||
<div style="height:325px;background-color: rgb(247, 247, 247);">
|
||||
<img id="sourceImage" src="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
|
||||
<button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate"
|
||||
data-option="-15" title="左旋15°"></button>
|
||||
<button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate"
|
||||
data-option="15" title="右旋15°"></button>
|
||||
<button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset"
|
||||
title="重置"></button>
|
||||
<label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload"
|
||||
title="选择图片"></label>
|
||||
<input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
|
||||
<input type="text" hidden value="{{ current_user.id }}" id="user_id">
|
||||
<div class="layui-col-xs3" style="padding-left:0px;">
|
||||
<div id="previewImage"
|
||||
style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div class="layui-row">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
|
||||
<button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate"
|
||||
data-option="-15" title="左旋15°"></button>
|
||||
<button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate"
|
||||
data-option="15" title="右旋15°"></button>
|
||||
<button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset"
|
||||
title="重置"></button>
|
||||
<label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload"
|
||||
title="选择图片"></label>
|
||||
<input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
|
||||
<input type="text" hidden value="{{ current_user.id }}" id="user_id">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% block models_script %}
|
||||
<script>
|
||||
layui.use(['jquery', 'layer', 'cropper', 'popup'], function () {
|
||||
let $ = layui.jquery
|
||||
let layer = layui.layer
|
||||
let cropper = layui.cropper
|
||||
let popup = layui.popup
|
||||
{% include 'admin/common/footer.html' %}
|
||||
<script>
|
||||
layui.use(['jquery', 'layer', 'cropper', 'popup'], function() {
|
||||
let $ = layui.jquery;
|
||||
let layer = layui.layer;
|
||||
let cropper = layui.cropper;
|
||||
let popup = layui.popup;
|
||||
|
||||
let options = {
|
||||
aspectRatio: 1 / 1, // 裁剪框比例
|
||||
preview: '#previewImage', // 预览div
|
||||
viewmode: 1,
|
||||
}
|
||||
let options = {
|
||||
aspectRatio: 1 / 1, // 裁剪框比例
|
||||
preview: '#previewImage', // 预览div
|
||||
viewmode: 1,
|
||||
};
|
||||
|
||||
$('#sourceImage').attr('src', parent.layui.$('#avatar').attr('src'))
|
||||
$('#sourceImage').cropper(options)
|
||||
$('#sourceImage').attr('src', parent.layui.$('#avatar').attr('src'));
|
||||
$('#sourceImage').cropper(options);
|
||||
|
||||
window.submitForm = function () {
|
||||
$('#sourceImage').crossOrigin = 'anonymous'//解决跨域图片问题
|
||||
$('#sourceImage').cropper('getCroppedCanvas', {
|
||||
width: 280,
|
||||
height: 140,
|
||||
}).toBlob(function (blob) {
|
||||
let timeStamp = Date.parse(new Date())
|
||||
let fileName = timeStamp + '.jpg'
|
||||
let formData = new FormData()
|
||||
formData.append('file', blob, fileName)
|
||||
formData.append('fileName', fileName)
|
||||
formData.append('fileToken', timeStamp)
|
||||
$.ajax({
|
||||
method: 'post',
|
||||
url: '/api/v1/file/photos', //用于文件上传的服务器端请求地址
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function (result) {
|
||||
if (result.success) {
|
||||
// 修改 avatar 字段
|
||||
$.ajax({
|
||||
method: 'put',
|
||||
url: '/api/v1/users/user/' + $('#user_id').val() + '/avatar',
|
||||
data: JSON.stringify({ avatar: result.data }),
|
||||
dataType: 'json',
|
||||
contentType: 'application/json',
|
||||
success: function (res) {
|
||||
if (res.success) {
|
||||
// 关闭当前弹层
|
||||
parent.layui.$('#avatar').attr('src', result.data.src)
|
||||
top.layui.$('#avatar').attr('src', result.data.src)
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name))
|
||||
} else {
|
||||
popup.failure('上传失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
} else {
|
||||
popup.failure('上传失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
$('.pear-btn').on('click', function () {
|
||||
let event = $(this).attr('cropper-event')
|
||||
if (event === 'rotate') {
|
||||
let option = $(this).attr('data-option')
|
||||
$('#sourceImage').cropper('rotate', option)
|
||||
} else if (event === 'reset') {
|
||||
$('#sourceImage').cropper('reset')
|
||||
}
|
||||
$('#uploadPicture').change(function () {
|
||||
let r = new FileReader()
|
||||
let f = this.files[0]
|
||||
let uploadFileSize = f.size / 1024
|
||||
if (uploadFileSize > 5120) {
|
||||
parent.layer.msg('上传文件不得超过5m', { icon: 5 })
|
||||
return false
|
||||
window.submitForm = function() {
|
||||
$('#sourceImage').crossOrigin = 'anonymous';//解决跨域图片问题
|
||||
$('#sourceImage').cropper('getCroppedCanvas', {
|
||||
width: 280,
|
||||
height: 140,
|
||||
}).toBlob(function(blob) {
|
||||
let timeStamp = Date.parse(new Date());
|
||||
let fileName = timeStamp + '.jpg';
|
||||
let formData = new FormData();
|
||||
formData.append('file', blob, fileName);
|
||||
formData.append('fileName', fileName);
|
||||
formData.append('fileToken', timeStamp);
|
||||
$.ajax({
|
||||
method: 'post',
|
||||
url: '/api/v1/file/photos', //用于文件上传的服务器端请求地址
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(result) {
|
||||
if (result.success) {
|
||||
// 修改 avatar 字段
|
||||
$.ajax({
|
||||
method: 'put',
|
||||
url: '/api/v1/users/user/' + $('#user_id').val() + '/avatar',
|
||||
data: JSON.stringify({avatar: result.data}),
|
||||
dataType: 'json',
|
||||
contentType: 'application/json',
|
||||
success: function(res) {
|
||||
if (res.success) {
|
||||
// 关闭当前弹层
|
||||
parent.layui.$('#avatar').attr('src', result.data.src);
|
||||
top.layui.$('#avatar').attr('src', result.data.src);
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
} else {
|
||||
popup.failure('上传失败');
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
popup.failure('上传失败');
|
||||
}
|
||||
r.readAsDataURL(f)
|
||||
r.onload = function (e) {
|
||||
$('#sourceImage').cropper('destroy').attr('src', this.result).cropper(options)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
{% endblock %}
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$('.pear-btn').on('click', function() {
|
||||
let event = $(this).attr('cropper-event');
|
||||
if (event === 'rotate') {
|
||||
let option = $(this).attr('data-option');
|
||||
$('#sourceImage').cropper('rotate', option);
|
||||
} else if (event === 'reset') {
|
||||
$('#sourceImage').cropper('reset');
|
||||
}
|
||||
$('#uploadPicture').change(function() {
|
||||
let r = new FileReader();
|
||||
let f = this.files[0];
|
||||
let uploadFileSize = f.size / 1024;
|
||||
if (uploadFileSize > 5120) {
|
||||
parent.layer.msg('上传文件不得超过5m', {icon: 5});
|
||||
return false;
|
||||
}
|
||||
r.readAsDataURL(f);
|
||||
r.onload = function(e) {
|
||||
$('#sourceImage').cropper('destroy').attr('src', this.result).cropper(options);
|
||||
};
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user