|
|
@@ -0,0 +1,106 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
|
|
+<head>
|
|
|
+ <th:block th:include="include :: header('上传背景图片')" />
|
|
|
+ <th:block th:include="include :: cropbox-css" />
|
|
|
+ <style>
|
|
|
+
|
|
|
+ .thumbBox_S{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 120px;
|
|
|
+ height: 110px;
|
|
|
+ margin-top: -55px;
|
|
|
+ margin-left: -60px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgb(102, 102, 102);
|
|
|
+ box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
|
|
+ background: none repeat scroll 0% 0% transparent;
|
|
|
+ }
|
|
|
+ .thumbBox_M{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 180px;
|
|
|
+ height: 150px;
|
|
|
+ margin-top: -75px;
|
|
|
+ margin-left:-90px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgb(102, 102, 102);
|
|
|
+ box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
|
|
+ background: none repeat scroll 0% 0% transparent;
|
|
|
+ }
|
|
|
+ .thumbBox_L{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 360px;
|
|
|
+ height: 200px;
|
|
|
+ margin-top: -100px;
|
|
|
+ margin-left: -180px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgb(102, 102, 102);
|
|
|
+ box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
|
|
+ background: none repeat scroll 0% 0% transparent;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body class="white-bg">
|
|
|
+<div class="container">
|
|
|
+ <div class="imageBox" style="margin: 0 auto;">
|
|
|
+ <div th:class="@{'thumbBox_'+${size}}" ></div>
|
|
|
+ <div class="spinner" style="display: none">Loading...</div>
|
|
|
+ </div>
|
|
|
+ <div class="action" style="margin: 10px auto;">
|
|
|
+ <div class="new-contentarea tc">
|
|
|
+ <a href="javascript:void(0)" class="upload-img"> <label for="avatar">上传图像</label> </a>
|
|
|
+ <input type="file" class="" name="avatar" id="avatar" accept="image/*"/>
|
|
|
+ </div>
|
|
|
+ <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
|
|
|
+ <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+<th:block th:include="include :: footer" />
|
|
|
+<th:block th:include="include :: cropbox-js" />
|
|
|
+<script type="text/javascript">
|
|
|
+ var cropper;
|
|
|
+ $(window).load(function() {
|
|
|
+ var bgUrl = '[[${bgUrl}]]';
|
|
|
+ var size = '[[${size}]]';
|
|
|
+ var options = {
|
|
|
+ thumbBox: '.thumbBox_'+size,
|
|
|
+ spinner: '.spinner',
|
|
|
+ imgSrc: $.common.isEmpty(bgUrl) ? ctx + 'img/profile.jpg' : bgUrl
|
|
|
+ }
|
|
|
+ cropper = $('.imageBox').cropbox(options);
|
|
|
+ $('#avatar').on('change', function() {
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.onload = function(e) {
|
|
|
+ options.imgSrc = e.target.result;
|
|
|
+ //根据MIME判断上传的文件是不是图片类型
|
|
|
+ if((options.imgSrc).indexOf("image/")==-1){
|
|
|
+ $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
|
|
|
+ } else {
|
|
|
+ cropper = $('.imageBox').cropbox(options);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(this.files[0]);
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ $('#btnZoomIn').on('click', function(){
|
|
|
+ cropper.zoomIn();
|
|
|
+ })
|
|
|
+
|
|
|
+ $('#btnZoomOut').on('click', function(){
|
|
|
+ cropper.zoomOut();
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
qxp192083