<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" th:href="@{/images/logo.jpg}"/>
<link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/js/layui/css/admin.css}">
<link rel="stylesheet" th:href="@{/js/upload_img/css/index.css}">
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
<link rel="stylesheet" th:href="@{/js/ueditor/themes/default/css/ueditor.css}" type="text/css"/>
<script type="text/javascript" th:src="@{/js/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" th:src="@{/js/ueditor/ueditor.all.js}"></script>
<script type="text/javascript" th:src="@{/js/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<style>
.layui-form-label {
width: 80px;
}
#editor {
height: 600px;
width: 700px;
}
</style>
</head>
<body>
<div class="layui-form" style="padding: 20px 0 0 0;">
<form id="formId" onsubmit="return false;">
<div class="layui-form-item">
<label class="layui-form-label">
<span style="color: red">*</span>轮播图片
</label>
<div class="layui-input-inline" style="width: 700px">
<div class="main">
<div id="showimg">
<ul id="showui">
</ul>
<div id="showinput">
</div>
</div>
<br>
<a class="layui-btn layui-btn" onclick="uploadImg()"><i class="layui-icon layui-icon-add-1"></i>选择图片</a>
<input style="display: none" type="file" id="upgteimg" value=""
accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">链接图片</label>
<div class="layui-input-inline">
<input id="file1" type="file" name="file1" onchange="xmTanUploadImg(this,this.id)" accept="image/*"
style='display: none'>
<div class="Img-div" onclick="chioceImage(1)">
<img id="file1img" src="" style="height: 130px;width: 100px">
</div>
</div>
</div>
<button class="layui-btn" style="display: none;" id="saveBtn" onclick="save()">保存</button>
</form>
</div>
<script type="text/javascript" th:src="@{/js/upload_img/js/updateimg.js}"></script>
<script>
var bannerId = '[[${bannerId}]]';
var ue = UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return "https://127.0.0.1:8330/product/uploads";
// return "https://127.0.0.1/goods/uploads";
} else if (action == 'listimage') {
return this._bkGetActionUrl.call(this, action);
} else {
return this._bkGetActionUrl.call(this, action);
}
}
$(function () {
if (bannerId) {
// getGoodsInfo(goodsId);
showImg('[[${obj.bannerUrls}]]');
console.log('[[${obj.pathUrls}]]')
$("#file1img").attr("src",'[[${obj.pathUrls}]]');
}
});
function save() {
var form = document.querySelector("#formId");
var formdata = new FormData(form);
var goodsImgArr = [dataArr.length];
for (var i = 0; i < dataArr.length; i++) {
goodsImgArr[i] = dataArr[i].base64;
}
formdata.append("imgArr", goodsImgArr);
formdata.append("bannerId", bannerId);
$.ajax({
url: "add",
data: formdata,
type: "POST",
dataType: "json",
processData: false,
contentType: false,
success: function (result) {
if (result.code == 100) {
layer.msg(result.msg, {icon: 6, time: 1000}, function () {
closeLayer();
parent.layui.table.reload('tableId');
});
} else {
layer.msg(result.msg, {icon: 5});
}
}
});
}
function showImg(goodsImgs) {
var arr = goodsImgs.split(",");
for (var i = 0; i < arr.length; i++) {
var imgMsg = {
name: randomString(5), //获取文件名
base64: arr[i], //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
}
dataArr.push(imgMsg);
currentReViewImgIndex = i;
var showui = document.getElementById("showui");
result = '<div class="showdiv"><img class="left" src="/js/upload_img/img/Arrow_left.svg" /><img class="center" src="/js/upload_img/img/delete.svg" /><img class="right" src="/js/upload_img/img/Arrow_right.svg" /></div><img id="img' + currentReViewImgIndex + randomString(1) + randomString(2) + randomString(5) + '" class="showimg" src="' + arr[i] + '" />';
var li = document.createElement('li');
li.innerHTML = result;
showui.appendChild(li);
}
}
function uploadImg() {
$("#upgteimg").click();
}
layui.use('form', function () {
var form = layui.form;
form.render();
});
function closeLayer() {
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
}
function xmTanUploadImg(obj, id) {
var file = obj.files[0];
var reader = new FileReader();
//读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
console.log("成功读取....");
var img = document.getElementById(id + 'img');
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
function chioceImage(i) {
$('#file' + i).trigger("click");
}
</script>
</body>
</html>