|
|
@@ -0,0 +1,686 @@
|
|
|
+{% load staticfiles %}
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
+ <title>新闻发布</title>
|
|
|
+ <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
|
|
|
+ <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
|
|
|
+ <link rel="stylesheet" href="{% static '/css/cropper.min.css' %}">
|
|
|
+ <link rel="stylesheet" href="{% static '/css/ImgCropping.css' %}">
|
|
|
+ <style>
|
|
|
+ .breadcrumbs {
|
|
|
+ padding: 12px 0 12px 30px;
|
|
|
+ border-bottom: 1px solid #dbdbdb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layui-breadcrumb>* {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fixedDiv {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ box-shadow: 0px 3px 5px 0px #ececec;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 发布类型 */
|
|
|
+
|
|
|
+ .widget-title {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 5px 0 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .widget-title::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ left: 0;
|
|
|
+ top: 9px;
|
|
|
+ height: 15px;
|
|
|
+ border-left: 5px solid #23a3ee;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 5px 0 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .widget-title h2 {
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 33px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .widget-title h2 span {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 100;
|
|
|
+ margin-left: 20px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /* 上传详情 */
|
|
|
+
|
|
|
+ .layui-form-item .layui-input-inline {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadContent,
|
|
|
+ .advertisingUp {
|
|
|
+ /* border-top: 7px solid #f0f0f0; */
|
|
|
+ padding: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadUl>li {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadUl>li:first-child {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .innerDiv {
|
|
|
+ max-width: 500px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片预览 */
|
|
|
+
|
|
|
+ .layui-upload-img {
|
|
|
+ width: 92px;
|
|
|
+ height: 92px;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #progressBar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 产品展厅上传多图 */
|
|
|
+
|
|
|
+ .uploadParent {
|
|
|
+ position: absolute;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadParent>div {
|
|
|
+ display: inline-block;
|
|
|
+ width: 92px;
|
|
|
+ height: 92px;
|
|
|
+ /* border: 1px solid #b8b8b8; */
|
|
|
+ background: url(../../static/imgs/addicon.png) no-repeat center;
|
|
|
+ background-size: 80% 80%;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadShowParent .layui-upload-list {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 表单样式 */
|
|
|
+
|
|
|
+ .layui-form-item .layui-input-inline {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layui-form-item .layui-input-textarea {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadImg {
|
|
|
+ position: absolute;
|
|
|
+ margin: 10px 0;
|
|
|
+ width: 92px;
|
|
|
+ height: 92px;
|
|
|
+ background: none;
|
|
|
+ border: 1px solid #b8b8b8;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadImgIcon {
|
|
|
+ background: url(../../static/imgs/uploadImgIcon.png) no-repeat center;
|
|
|
+ background-size: 80% 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 地图 */
|
|
|
+ .layui-form-label {
|
|
|
+ width: 102px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mapBox {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map {
|
|
|
+ width: 55%;
|
|
|
+ height: 400px;
|
|
|
+ border: 1px solid #878787;
|
|
|
+ }
|
|
|
+
|
|
|
+ .locatPoint button {
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 10px 20px 5px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .locatPoint button.sw {
|
|
|
+ background-color: #ed9c22;
|
|
|
+ }
|
|
|
+
|
|
|
+ .locatPoint button.ne {
|
|
|
+ background-color: #22a3ed;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .locatPoint button.center {
|
|
|
+ background-color: #ed2289;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 广告位-开始上传、取消上传按钮 */
|
|
|
+ .imgListAction,
|
|
|
+ .delImgData {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 轮播图-开始上传、取消上传按钮 */
|
|
|
+ .testListAction,
|
|
|
+ .delTestData {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="content">
|
|
|
+ <div class="floatNav">
|
|
|
+ <!-- 导航 -->
|
|
|
+ <div class="breadcrumbs">
|
|
|
+ <span class="layui-breadcrumb">
|
|
|
+ <a target="BoardRight">首页</a>
|
|
|
+ <a>
|
|
|
+ <cite>图片上传</cite>
|
|
|
+ </a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 内容 -->
|
|
|
+ <div>
|
|
|
+ <!-- 发布详情 -->
|
|
|
+ <div class="uploadContent" id="uploadContent">
|
|
|
+ <div class="widget-title">
|
|
|
+ <h2>首页轮播图上传
|
|
|
+ <span id="Uptime"></span>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 上传 -->
|
|
|
+ <div class="layui-upload">
|
|
|
+ <span class="">轮播图片：</span>
|
|
|
+ <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
|
|
|
+ <div id="demo1" style="margin-top: 10px">
|
|
|
+ <img src="" alt="" style="width: 1200px; height: 470px;" class="layui-upload-img"
|
|
|
+ id="carouselImg">
|
|
|
+ </div>
|
|
|
+ <button type="button" class="layui-btn testListAction" id="testListAction">开始上传</button>
|
|
|
+ <button type="button" class="layui-btn layui-btn-danger delTestData" id="delTestData">取消上传</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 广告位 -->
|
|
|
+ <div class="advertisingUp">
|
|
|
+ <div class="widget-title">
|
|
|
+ <h2>首页广告位图上传
|
|
|
+ <span id="Uptime"></span>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 上传 -->
|
|
|
+ <div class="layui-upload">
|
|
|
+ <span class="">广告位图片：</span>
|
|
|
+ <button type="button" class="layui-btn layui-btn-normal" id="replaceImg">选择图片</button>
|
|
|
+ <div id="demo2" style="margin-top: 10px">
|
|
|
+ <img src="" alt="" style="width: 1200px; height: 90px;" class="layui-upload-img" id="finalImg">
|
|
|
+ </div>
|
|
|
+ <button type="button" class="layui-btn imgListAction" id="imgListAction">开始上传</button>
|
|
|
+ <button type="button" class="layui-btn layui-btn-danger delImgData" id="delImgData">取消上传</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--图片裁剪框 start广告位-->
|
|
|
+ <div style="display: none" class="tailoring-container1">
|
|
|
+ <div class="black-cloth" onclick="closeTailor(this)"></div>
|
|
|
+ <div class="tailoring-content">
|
|
|
+ <div class="tailoring-content-one">
|
|
|
+ <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
|
|
|
+ <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg"
|
|
|
+ class="hidden" onchange="selectImg(this)">
|
|
|
+ 选择图片
|
|
|
+ </label>
|
|
|
+ <div class="close-tailoring" onclick="closeTailor(this)">×</div>
|
|
|
+ </div>
|
|
|
+ <div class="tailoring-content-two">
|
|
|
+ <div class="tailoring-box-parcel">
|
|
|
+ <img id="tailoringImg">
|
|
|
+ </div>
|
|
|
+ <div class="preview-box-parcel">
|
|
|
+ <p>图片预览：</p>
|
|
|
+ <div class="square previewImg"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tailoring-content-three">
|
|
|
+ <!-- <button class="l-btn cropper-reset-btn">复位</button>
|
|
|
+ <button class="l-btn cropper-rotate-btn">旋转</button>
|
|
|
+ <button class="l-btn cropper-scaleX-btn">换向</button> -->
|
|
|
+ <button class="l-btn sureCut" id="sureCut">确定</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--图片裁剪框 end广告位-->
|
|
|
+
|
|
|
+
|
|
|
+ <!--图片裁剪框 start首页轮播-->
|
|
|
+ <div style="display: none" class="tailoring-container2">
|
|
|
+ <div class="black-cloth" onclick="closeTailorA(this)"></div>
|
|
|
+ <div class="tailoring-content">
|
|
|
+ <div class="tailoring-content-one">
|
|
|
+ <label title="上传图片" for="chooseImgA" class="l-btn choose-btn">
|
|
|
+ <input type="file" accept="image/jpg,image/jpeg,image/png" name="fileA" id="chooseImgA"
|
|
|
+ class="hidden" onchange="selectImgA(this)">
|
|
|
+ 选择图片
|
|
|
+ </label>
|
|
|
+ <div class="close-tailoring" onclick="closeTailorA(this)">×</div>
|
|
|
+ </div>
|
|
|
+ <div class="tailoring-content-two">
|
|
|
+ <div class="tailoring-box-parcel">
|
|
|
+ <img id="carouselingImg">
|
|
|
+ </div>
|
|
|
+ <div class="preview-box-parcel">
|
|
|
+ <p>图片预览：</p>
|
|
|
+ <div class="square previewImgA"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tailoring-content-three">
|
|
|
+ <!-- <button class="l-btn cropper-reset-btn">复位</button>
|
|
|
+ <button class="l-btn cropper-rotate-btn">旋转</button>
|
|
|
+ <button class="l-btn cropper-scaleX-btn">换向</button> -->
|
|
|
+ <button class="l-btn sureCut" id="carousesureCut">确定</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--图片裁剪框 end首页轮播-->
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
|
|
|
+ <script src="{% static '/lib/layui/layui.js'%}"></script>
|
|
|
+ <script src="{% static 'lib/ckeditor/ckeditor.js'%}"></script>
|
|
|
+ <script src="{% static 'lib/ckeditor/lang/zh-cn.js'%}"></script>
|
|
|
+ <script src="{% static '/js/backstageNet/common.js'%}"></script>
|
|
|
+ <script src="{% static '/js/cropper.min.js'%}"></script>
|
|
|
+ <script>
|
|
|
+ var element, form, upload;
|
|
|
+ var advertisingName //广告位上传图片名称
|
|
|
+ var carouselName //轮播图上传图片名称
|
|
|
+ layui.use(['element', 'form', 'upload', 'layer'], function () {
|
|
|
+ element = layui.element;
|
|
|
+ form = layui.form;
|
|
|
+ upload = layui.upload;
|
|
|
+ layer = layui.layer;
|
|
|
+ // $ = layui.jquery
|
|
|
+ });
|
|
|
+
|
|
|
+ windowAddMouseWheel();
|
|
|
+ function windowAddMouseWheel() {
|
|
|
+ var scrollFunc = function (e) {
|
|
|
+ e = e || window.event;
|
|
|
+ var top = $(window).scrollTop();
|
|
|
+ if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
|
|
|
+ if (e.wheelDelta > 0) { //当滑轮向上滚动时
|
|
|
+ if (top < 60) {
|
|
|
+ if ($(".floatNav").hasClass("fixedDiv")) {
|
|
|
+ $(".floatNav").removeClass("fixedDiv");
|
|
|
+ $(window).scrollTop(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (e.wheelDelta < 0) { //当滑轮向下滚动时
|
|
|
+ if (top >= 60) {
|
|
|
+ $(".floatNav").addClass("fixedDiv");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (e.detail) { //Firefox滑轮事件
|
|
|
+ if (e.detail > 0) { //当滑轮向上滚动时
|
|
|
+ if (top < 60) {
|
|
|
+ if ($(".floatNav").hasClass("fixedDiv")) {
|
|
|
+ $(".floatNav").removeClass("fixedDiv");
|
|
|
+ $(window).scrollTop(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (e.detail < 0) { //当滑轮向下滚动时
|
|
|
+ if (top >= 60) {
|
|
|
+ $(".floatNav").addClass("fixedDiv");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //给页面绑定滑轮滚动事件
|
|
|
+ if (document.addEventListener) {
|
|
|
+ document.addEventListener('DOMMouseScroll', scrollFunc, false);
|
|
|
+ }
|
|
|
+ //滚动滑轮触发scrollFunc方法
|
|
|
+ window.onmousewheel = document.onmousewheel = scrollFunc;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 广告位开始上传按钮监听事件
|
|
|
+ $('#imgListAction').on('click', function () {
|
|
|
+ var timestamp = Date.parse(new Date());
|
|
|
+ var arr = imgArr.split(','), mime = arr[0].match(/:(.*?);/)[1]
|
|
|
+ bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
|
+ while (n--) {
|
|
|
+ u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ }
|
|
|
+ var imgFile = new File([u8arr], timestamp, { type: mime })
|
|
|
+ console.log(imgFile)
|
|
|
+
|
|
|
+ // var timestamp = Date.parse(new Date());
|
|
|
+ // var arr = base64url.split(','), mime = arr[0].match(/:(.*?);/)[1]
|
|
|
+ // if (imgArr.length == 1) {
|
|
|
+ // var arr = imgArr[0].split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
|
+ // } else if (imgArr.length == 2) {
|
|
|
+ // var arr = imgArr[1].split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
|
+ // } else if (imgArr.length == 3) {
|
|
|
+ // var arr = imgArr[2].split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
|
+ // }
|
|
|
+ // var arr = imgArr[0].split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
|
+ // bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
|
+ // while (n--) {
|
|
|
+ // u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ // }
|
|
|
+ // var imgFile = new File([u8arr], timestamp, { type: mime })
|
|
|
+ });
|
|
|
+
|
|
|
+ // 广告位取消上传按钮监听事件
|
|
|
+ $('#delImgData').on('click', function () {
|
|
|
+ layer.confirm('是否删除已上传的图片', {
|
|
|
+ btn: ['确定', '取消'] //按钮
|
|
|
+ }, function () {
|
|
|
+ imgArr = [] //清空数组数据
|
|
|
+ $('#demo2 img').remove(); //删除所有img
|
|
|
+ $('#imgListAction').addClass('imgListAction') //隐藏上传按钮
|
|
|
+ $('#delImgData').addClass('delImgData') //隐藏取消按钮
|
|
|
+ layer.msg('删除成功', { icon: 1 });
|
|
|
+ }, function () {
|
|
|
+ layer.msg('取消删除', { icon: 1 });
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ //广告位上传图片按钮监听事件
|
|
|
+ $('#replaceImg').on('click', function () {
|
|
|
+ // $("#replaceImg").addClass("layui-btn-disabled")
|
|
|
+ //弹出图片裁剪框
|
|
|
+ boxSize1 = 40
|
|
|
+ boxSize2 = 3
|
|
|
+ $("#replaceImg").on("click", function () {
|
|
|
+ $(".tailoring-container1").toggle();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ //弹出框水平垂直居中
|
|
|
+ (window.onresize = function () {
|
|
|
+ var win_height = $(window).height();
|
|
|
+ var win_width = $(window).width();
|
|
|
+ if (win_width <= 768) {
|
|
|
+ $(".tailoring-content").css({
|
|
|
+ "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
|
|
|
+ "left": 0
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ $(".tailoring-content").css({
|
|
|
+ "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
|
|
|
+ "left": (win_width - $(".tailoring-content").outerWidth()) / 2
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })();
|
|
|
+
|
|
|
+ //广告位图像上传
|
|
|
+ function selectImg(file) {
|
|
|
+ if (!file.files || !file.files[0]) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.onload = function (evt) {
|
|
|
+ var replaceSrc = evt.target.result;
|
|
|
+ //更换cropper的图片
|
|
|
+ $('#tailoringImg').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
|
|
|
+ }
|
|
|
+ advertisingName = fileA.files[0].name
|
|
|
+ reader.readAsDataURL(file.files[0]);
|
|
|
+ }
|
|
|
+ //cropper图片裁剪
|
|
|
+ $('#tailoringImg').cropper({
|
|
|
+ aspectRatio: 40 / 3,//默认比例
|
|
|
+ preview: '.previewImg',//预览视图
|
|
|
+ guides: false, //裁剪框的虚线(九宫格)
|
|
|
+ autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
|
|
|
+ movable: false, //是否允许移动图片
|
|
|
+ dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
|
|
|
+ movable: true, //是否允许移动剪裁框
|
|
|
+ resizable: true, //是否允许改变裁剪框的大小
|
|
|
+ zoomable: false, //是否允许缩放图片大小
|
|
|
+ mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片
|
|
|
+ touchDragZoom: true, //是否允许通过触摸移动来缩放图片
|
|
|
+ rotatable: true, //是否允许旋转图片
|
|
|
+ crop: function (e) {
|
|
|
+ // 输出结果数据裁剪图像。
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //广告位旋转
|
|
|
+ $(".cropper-rotate-btn").on("click", function () {
|
|
|
+ $('#tailoringImg').cropper("rotate", 45);
|
|
|
+ });
|
|
|
+ //广告位复位
|
|
|
+ $(".cropper-reset-btn").on("click", function () {
|
|
|
+ $('#tailoringImg').cropper("reset");
|
|
|
+ });
|
|
|
+ //广告位换向
|
|
|
+ var flagX = true;
|
|
|
+ $(".cropper-scaleX-btn").on("click", function () {
|
|
|
+ if (flagX) {
|
|
|
+ $('#tailoringImg').cropper("scaleX", -1);
|
|
|
+ flagX = false;
|
|
|
+ } else {
|
|
|
+ $('#tailoringImg').cropper("scaleX", 1);
|
|
|
+ flagX = true;
|
|
|
+ }
|
|
|
+ flagX != flagX;
|
|
|
+ });
|
|
|
+
|
|
|
+ //广告位裁剪后的处理
|
|
|
+ $("#sureCut").on("click", function () {
|
|
|
+ if ($("#tailoringImg").attr("src") == null) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
|
|
|
+ var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
|
|
|
+ imgArr = base64url
|
|
|
+ console.log(imgArr)
|
|
|
+ $("#finalImg").prop("src", base64url);//显示为图片的形式
|
|
|
+ //关闭裁剪框
|
|
|
+ closeTailor();
|
|
|
+ $('#imgListAction').removeClass('imgListAction')
|
|
|
+ $('#delImgData').removeClass('delImgData')
|
|
|
+
|
|
|
+
|
|
|
+ // var timestamp = Date.parse(new Date());
|
|
|
+ // var arr = base64url.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
|
+ // bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
|
+ // while (n--) {
|
|
|
+ // u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ // }
|
|
|
+ // var imgFile = new File([u8arr], timestamp, { type: mime })
|
|
|
+ // imgArr.push(imgFile)
|
|
|
+ // if (imgArr.length == 1) {
|
|
|
+ // $('#demo2').append('<img src="' + imgArr[0] + '"class="layui-upload-img">')
|
|
|
+ // } else if (imgArr.length == 2) {
|
|
|
+ // $('#demo2').append('<img src="' + imgArr[1] + '" class="layui-upload-img">')
|
|
|
+ // } else if (imgArr.length == 3) {
|
|
|
+ // $('#demo2').append('<img src="' + imgArr[2] + '"class="layui-upload-img">')
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //广告位关闭裁剪框
|
|
|
+ function closeTailor() {
|
|
|
+ $(".tailoring-container1").toggle();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 首页轮播开始上传按钮监听事件
|
|
|
+ $('#testListAction').on('click', function () {
|
|
|
+ // var timestamp = Date.parse(new Date());
|
|
|
+ // var arr = imgArrA.split(','), mime = arr[0].match(/:(.*?);/)[1]
|
|
|
+ // bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
|
+ // while (n--) {
|
|
|
+ // u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ // }
|
|
|
+ // var imgFile = new File([u8arr], timestamp, { type: mime })
|
|
|
+ });
|
|
|
+
|
|
|
+ // 首页轮播取消上传按钮监听事件
|
|
|
+ $('#delTestData').on('click', function () {
|
|
|
+ layer.confirm('是否删除已上传的图片', {
|
|
|
+ btn: ['确定', '取消'] //按钮
|
|
|
+ }, function () {
|
|
|
+ imgArr = [] //清空数组数据
|
|
|
+ $('#demo1 img').remove(); //删除所有img
|
|
|
+ $('#testListAction').addClass('testListAction') //隐藏上传按钮
|
|
|
+ $('#delTestData').addClass('delTestData') //隐藏取消按钮
|
|
|
+ layer.msg('删除成功', { icon: 1 });
|
|
|
+ }, function () {
|
|
|
+ layer.msg('取消删除', { icon: 1 });
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ //首页轮播上传图片按钮监听事件
|
|
|
+ $('#testList').on('click', function () {
|
|
|
+ // $("#replaceImg").addClass("layui-btn-disabled")
|
|
|
+ boxSize1 = 4
|
|
|
+ boxSize2 = 1
|
|
|
+ //弹出图片裁剪框
|
|
|
+ $("#testList").on("click", function () {
|
|
|
+ $(".tailoring-container2").toggle();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ //首页轮播图像上传
|
|
|
+ function selectImgA(fileA) {
|
|
|
+ if (!fileA.files || !fileA.files[0]) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.onload = function (evt) {
|
|
|
+ var replaceSrc = evt.target.result;
|
|
|
+ //更换cropper的图片
|
|
|
+ $('#carouselingImg').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
|
|
|
+ }
|
|
|
+ carouselName = fileA.files[0].name
|
|
|
+ reader.readAsDataURL(fileA.files[0]);
|
|
|
+ }
|
|
|
+ //cropper图片裁剪
|
|
|
+ $('#carouselingImg').cropper({
|
|
|
+ aspectRatio: 4 / 1,//默认比例
|
|
|
+ preview: '.previewImgA',//预览视图
|
|
|
+ guides: false, //裁剪框的虚线(九宫格)
|
|
|
+ autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
|
|
|
+ movable: false, //是否允许移动图片
|
|
|
+ dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
|
|
|
+ movable: true, //是否允许移动剪裁框
|
|
|
+ resizable: true, //是否允许改变裁剪框的大小
|
|
|
+ zoomable: false, //是否允许缩放图片大小
|
|
|
+ mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片
|
|
|
+ touchDragZoom: true, //是否允许通过触摸移动来缩放图片
|
|
|
+ rotatable: true, //是否允许旋转图片
|
|
|
+ crop: function (e) {
|
|
|
+ // 输出结果数据裁剪图像。
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //首页轮播旋转
|
|
|
+ $(".cropper-rotate-btn").on("click", function () {
|
|
|
+ $('#carouselingImg').cropper("rotate", 45);
|
|
|
+ });
|
|
|
+ //首页轮播复位
|
|
|
+ $(".cropper-reset-btn").on("click", function () {
|
|
|
+ $('#carouselingImg').cropper("reset");
|
|
|
+ });
|
|
|
+ //首页轮播换向
|
|
|
+ var flagX = true;
|
|
|
+ $(".cropper-scaleX-btn").on("click", function () {
|
|
|
+ if (flagX) {
|
|
|
+ $('#carouselingImg').cropper("scaleX", -1);
|
|
|
+ flagX = false;
|
|
|
+ } else {
|
|
|
+ $('#carouselingImg').cropper("scaleX", 1);
|
|
|
+ flagX = true;
|
|
|
+ }
|
|
|
+ flagX != flagX;
|
|
|
+ });
|
|
|
+
|
|
|
+ //首页轮播裁剪后的处理
|
|
|
+ $("#carousesureCut").on("click", function () {
|
|
|
+ if ($("#carouselingImg").attr("src") == null) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ var cas = $('#carouselingImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
|
|
|
+ var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
|
|
|
+ imgArrA = base64url
|
|
|
+ $("#carouselImg").prop("src", base64url);//显示为图片的形式
|
|
|
+ //关闭裁剪框
|
|
|
+ closeTailorA();
|
|
|
+ $('#testListAction').removeClass('testListAction')
|
|
|
+ $('#delTestData').removeClass('delTestData')
|
|
|
+ var arr = imgArrA.split(','), mime = arr[0].match(/:(.*?);/)[1]
|
|
|
+ bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
|
+ while (n--) {
|
|
|
+ u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ }
|
|
|
+ var imgFile = new File([u8arr], carouselName, { type: mime })
|
|
|
+ var form = new FormData()
|
|
|
+ form.append('upload', imgFile)
|
|
|
+ $.ajax({
|
|
|
+ url: 'system_photo',
|
|
|
+ type: 'post',
|
|
|
+ data: form,
|
|
|
+ processData: false, // 告诉jQuery不要去处理发送的数据
|
|
|
+ contentType: false, // 告诉jQuery不要去设置Content-Type请求头
|
|
|
+ success: function (data) {
|
|
|
+ console.log(data)
|
|
|
+ },
|
|
|
+ error: function (err) {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //首页轮播关闭裁剪框
|
|
|
+ function closeTailorA() {
|
|
|
+ $(".tailoring-container2").toggle();
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
