|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>图片上传示例</title>
|
|
|
<link rel="stylesheet" href="./component/layui/css/layui.css" media="all">
|
|
|
<style>
|
|
|
.upload-area {
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
|
|
|
/* 添加到你的样式表中 */
|
|
|
.delete-button {
|
|
|
display: block; /* 使按钮宽度填满其容器 */
|
|
|
margin-top: 10px; /* 按钮与图片之间的间距 */
|
|
|
padding: 8px 16px;
|
|
|
font-size: 14px; /* 根据需要调整字体大小 */
|
|
|
color: #fff; /* 文字颜色 */
|
|
|
background-color: #f44336; /* 背景颜色 */
|
|
|
border: none; /* 无边框 */
|
|
|
border-radius: 4px; /* 圆角边框 */
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
|
|
|
cursor: pointer; /* 鼠标悬停时显示手形图标 */
|
|
|
transition: all 0.3s ease; /* 平滑过渡效果 */
|
|
|
}
|
|
|
|
|
|
.delete-button:hover {
|
|
|
background-color: #e53935; /* 鼠标悬停时的背景颜色 */
|
|
|
}
|
|
|
|
|
|
/* 父元素的样式 */
|
|
|
.ew-datagrid-item {
|
|
|
display: flex;
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
/* 其他样式... */
|
|
|
}
|
|
|
|
|
|
.project-list-item {
|
|
|
display: flex;
|
|
|
flex-direction: column; /* 设置为垂直布局 */
|
|
|
align-items: center; /* 水平居中 */
|
|
|
margin-bottom: 10px; /* 根据需要添加底部外边距 */
|
|
|
}
|
|
|
|
|
|
.project-list-item-cover {
|
|
|
cursor: pointer; /* 当鼠标悬停在图片上时显示小手形状 */
|
|
|
/* 其他样式... */
|
|
|
}
|
|
|
|
|
|
/* 自定义关闭按钮的样式 */
|
|
|
.layui-layer-title {
|
|
|
background-color: #333; /* 标题栏背景色 */
|
|
|
color: #fff; /* 标题栏文字颜色 */
|
|
|
}
|
|
|
|
|
|
/* 增强关闭按钮的可见性 */
|
|
|
.layui-layer-close1 {
|
|
|
color: #fff; /* 关闭按钮文字颜色 */
|
|
|
text-shadow: none; /* 取消文字阴影 */
|
|
|
}
|
|
|
|
|
|
.layui-layer-close1:hover {
|
|
|
color: #f00; /* 鼠标悬停时关闭按钮文字颜色 */
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div class="upload-area">
|
|
|
<form class="layui-form" action="/upload" method="post" enctype="multipart/form-data">
|
|
|
<div class="layui-form-item">
|
|
|
<label class="layui-form-label">上传图片:</label>
|
|
|
<div class="layui-input-inline">
|
|
|
<button type="button" class="layui-btn" id="uploadImage">
|
|
|
<i class="layui-icon"></i>上传图片
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-row layui-col-space10">
|
|
|
<div class="layui-col-md12">
|
|
|
<div class="layui-card">
|
|
|
<div class="layui-card-body">
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
|
|
<legend>图片列表</legend>
|
|
|
</fieldset>
|
|
|
<div class="layui-row layui-col-space30" style="height: 300px; overflow:auto" id="LAY_Images">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="./component/layui/layui.js"></script>
|
|
|
<script>
|
|
|
layui.use(['form', 'upload', 'jquery'], function () {
|
|
|
var form = layui.form;
|
|
|
var upload = layui.upload;
|
|
|
var $ = layui.jquery;
|
|
|
|
|
|
//放大图片
|
|
|
function ImgClick(obj) {
|
|
|
var img_url = obj.src.split("?")[0];
|
|
|
var id = obj.id;
|
|
|
window.location.href = 'ManageImg.html?img_url=' + img_url + '&id=' + id;
|
|
|
}
|
|
|
|
|
|
//删除图片
|
|
|
function deleteImg(id, img_url) {
|
|
|
// 弹出确认框
|
|
|
layer.confirm('确定要删除这个图片吗？', {
|
|
|
title: '提示'
|
|
|
, btn: ['确定', '取消'] // 按钮
|
|
|
, icon: 3 // 图标
|
|
|
}, function (index) {
|
|
|
//删除
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/QingLong/HuiYa/AdminDeleteInputImage",
|
|
|
dataType: 'json',
|
|
|
data: {
|
|
|
"id": id
|
|
|
},
|
|
|
async: false,
|
|
|
success: function (res) {
|
|
|
// 假设删除成功后，可以在这里做一些UI上的反馈，如提示用户删除成功
|
|
|
layer.msg('删除成功！', {icon: 1});
|
|
|
// 关闭确认框
|
|
|
layer.close(index);
|
|
|
// 刷新
|
|
|
AdminImageList();
|
|
|
}
|
|
|
});
|
|
|
}, function (index) {
|
|
|
// 关闭确认框
|
|
|
layer.close(index);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function AdminImageList() {
|
|
|
$.ajax({
|
|
|
type: "GET",
|
|
|
url: "/QingLong/HuiYa/AdminImageList",
|
|
|
async: false,
|
|
|
success: function (data) {
|
|
|
$("#LAY_Images").empty();
|
|
|
$.each(data, function (index, item) {
|
|
|
$("#LAY_Images").append(
|
|
|
"<div class='layui-col-md2 ew-datagrid-item'>" +
|
|
|
"<div class='project-list-item'>" +
|
|
|
"<img class='project-list-item-cover' id='" + item.id + "' src='" + item.img_url + "?x-oss-process=image/resize,w_362,limit_0" + "' />" +
|
|
|
"<button class='delete-button' id='" + item.id + "' data-img-url='" + item.img_url + "'>删除</button>" +
|
|
|
"</div>" +
|
|
|
"</div>"
|
|
|
);
|
|
|
});
|
|
|
|
|
|
// 使用事件委托为图片和删除按钮绑定事件
|
|
|
$("#LAY_Images").on('click', '.project-list-item-cover', function () {
|
|
|
ImgClick(this);
|
|
|
}).on('click', '[data-img-url]', function () {
|
|
|
var imgUrl = $(this).data('img-url');
|
|
|
var id = $(this).attr('id');
|
|
|
deleteImg(id, imgUrl);
|
|
|
});
|
|
|
// 如果需要，重新渲染 Layui 组件
|
|
|
form.render(); // 确保调用正确的 Layui 方法
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
AdminImageList();
|
|
|
|
|
|
|
|
|
// 图片上传配置
|
|
|
var uploadImage = upload.render({
|
|
|
elem: '#uploadImage' // 绑定元素
|
|
|
, multiple: true
|
|
|
, url: '/QingLong/HuiYa/AdminUpload' // 上传接口
|
|
|
, accept: 'file' //普通文件
|
|
|
, number: 10//上传个数
|
|
|
, acceptMime: 'image/jpeg, image/png'
|
|
|
, exts: 'jpg|png|bmp|jpeg' //只允许上传压缩文件
|
|
|
, done: function (res) { // 上传成功后的回调
|
|
|
AdminImageList();
|
|
|
}
|
|
|
, error: function () {
|
|
|
// 请求异常回调
|
|
|
}
|
|
|
});
|
|
|
// 监听提交
|
|
|
form.on('submit(upload)', function (data) {
|
|
|
// 发送数据到服务器
|
|
|
// 这里需要根据实际情况调整，例如使用AJAX发送表单数据
|
|
|
//console.log(data.field); // 表单数据
|
|
|
AdminImageList();
|
|
|
return false; // 阻止表单跳转
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
