331 lines
11 KiB
HTML
331 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>文件管理器</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
.card-thumb {
|
|
width: 100%;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
}
|
|
.file-icon {
|
|
font-size: 60px;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
.upload-area {
|
|
border: 2px dashed #0d6efd;
|
|
border-radius: 10px;
|
|
padding: 40px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: .2s;
|
|
}
|
|
.upload-area.dragover {
|
|
background: #e3f2fd;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
|
|
<div class="container py-4">
|
|
|
|
<h2 class="text-center mb-4">文件上传 / 管理</h2>
|
|
|
|
<!-- 上传区域 -->
|
|
<div id="upload-area" class="upload-area mb-4">
|
|
<h5>点击或拖拽上传（支持多文件）</h5>
|
|
<input type="file" id="file-input" class="d-none" multiple>
|
|
</div>
|
|
|
|
<!-- 上传进度条 -->
|
|
<div class="progress mb-4 d-none" id="progress-box">
|
|
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%">0%</div>
|
|
</div>
|
|
|
|
<h4 class="mb-3">文件列表</h4>
|
|
|
|
<div class="row">
|
|
{{ range .files }}
|
|
<div class="col-6 col-md-3 col-lg-2 mb-3">
|
|
<div class="card shadow-sm">
|
|
|
|
{{ if (or (hasSuffix . ".webp") (hasSuffix . ".jpg") (hasSuffix . ".jpeg") (hasSuffix . ".png") (hasSuffix . ".gif")) }}
|
|
<!-- 图片缩略图 -->
|
|
<img src="/download/{{ . }}" class="card-thumb preview-img img-fluid" data-src="/download/{{ . }}" style="cursor:pointer;" />
|
|
|
|
{{ else if (or (hasSuffix . ".mp4") (hasSuffix . ".mov") (hasSuffix . ".webm")) }}
|
|
<!-- 视频卡片 -->
|
|
<video class="card-thumb" muted onclick="playVideo('/download/{{ . }}')">
|
|
<source src="/download/{{ . }}">
|
|
</video>
|
|
|
|
{{ else }}
|
|
<!-- 普通文件图标 -->
|
|
<div class="file-icon">
|
|
📄
|
|
</div>
|
|
{{ end }}
|
|
|
|
<div class="card-body p-2">
|
|
<div class="small text-truncate" title="{{ . }}">{{ . }}</div>
|
|
|
|
<div class="d-flex justify-content-between mt-2">
|
|
<a class="btn btn-primary btn-sm" href="/download/{{ . }}">下载</a>
|
|
<button class="btn btn-danger btn-sm" onclick="deleteFile('{{ . }}')">删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图片放大 Modal -->
|
|
<div class="modal fade" id="imagePreviewModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered modal-xl">
|
|
<div class="modal-content bg-dark text-white">
|
|
<div class="modal-body position-relative">
|
|
|
|
<img id="previewImage" src="" class="img-fluid d-block mx-auto">
|
|
|
|
<!-- Left -->
|
|
<button id="prevImage"
|
|
class="btn btn-secondary position-absolute top-50 start-0 translate-middle-y">
|
|
◀
|
|
</button>
|
|
|
|
<!-- Right -->
|
|
<button id="nextImage"
|
|
class="btn btn-secondary position-absolute top-50 end-0 translate-middle-y">
|
|
▶
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 视频播放 Modal -->
|
|
<div class="modal fade" id="videoModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content">
|
|
<video id="videoModalSrc" class="w-100" controls autoplay></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 通用弹窗 -->
|
|
<div class="modal fade" id="commonModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="commonModalTitle">提示</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<div class="modal-body" id="commonModalBody">
|
|
内容
|
|
</div>
|
|
|
|
<div class="modal-footer" id="commonModalFooter">
|
|
<!-- 按钮会通过 JS 自动生成 -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ================== 图片放大 ===================
|
|
function showImage(src) {
|
|
document.getElementById("imgModalSrc").src = src;
|
|
new bootstrap.Modal(document.getElementById("imgModal")).show();
|
|
}
|
|
|
|
// ================== 视频播放 ===================
|
|
function playVideo(src) {
|
|
const video = document.getElementById("videoModalSrc");
|
|
video.src = src;
|
|
new bootstrap.Modal(document.getElementById("videoModal")).show();
|
|
}
|
|
|
|
// ================== 删除文件 ===================
|
|
function deleteFile(name) {
|
|
showConfirm(
|
|
"确定删除文件：" + name + " ?",
|
|
"删除确认",
|
|
() => { // onConfirm
|
|
fetch("/delete/" + name, { method: "DELETE" })
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
showAlert("删除成功！", "完成", () => location.reload());
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
// ================== 上传相关代码（保持原来功能） ===================
|
|
const uploadArea = document.getElementById("upload-area");
|
|
const fileInput = document.getElementById("file-input");
|
|
const progressBox = document.getElementById("progress-box");
|
|
const progressBar = document.getElementById("progress-bar");
|
|
|
|
uploadArea.addEventListener("click", () => fileInput.click());
|
|
|
|
uploadArea.addEventListener("dragover", e => {
|
|
e.preventDefault();
|
|
uploadArea.classList.add("dragover");
|
|
});
|
|
uploadArea.addEventListener("dragleave", () => uploadArea.classList.remove("dragover"));
|
|
uploadArea.addEventListener("drop", e => {
|
|
e.preventDefault();
|
|
uploadArea.classList.remove("dragover");
|
|
uploadFiles(e.dataTransfer.files);
|
|
});
|
|
|
|
fileInput.addEventListener("change", () => uploadFiles(fileInput.files));
|
|
|
|
function uploadFiles(files) {
|
|
if (!files.length) return;
|
|
|
|
const formData = new FormData();
|
|
[...files].forEach(f => formData.append("files", f));
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/upload");
|
|
|
|
progressBox.classList.remove("d-none");
|
|
|
|
xhr.upload.onprogress = e => {
|
|
let percent = Math.round((e.loaded / e.total) * 100);
|
|
progressBar.style.width = percent + "%";
|
|
progressBar.innerText = percent + "%";
|
|
};
|
|
|
|
xhr.onload = () => {
|
|
if (xhr.status === 200) {
|
|
showAlert("上传成功！", "上传完成", () => {
|
|
location.reload();
|
|
});
|
|
} else {
|
|
showAlert("上传失败！");
|
|
}
|
|
};
|
|
|
|
xhr.send(formData);
|
|
}
|
|
</script>
|
|
<script>
|
|
let commonModal = null;
|
|
|
|
function showAlert(message, title = "提示", callback = null) {
|
|
document.getElementById("commonModalTitle").innerText = title;
|
|
document.getElementById("commonModalBody").innerText = message;
|
|
|
|
const footer = document.getElementById("commonModalFooter");
|
|
footer.innerHTML = `
|
|
<button type="button" class="btn btn-primary" id="modalOkBtn">确定</button>
|
|
`;
|
|
|
|
document.getElementById("modalOkBtn").onclick = () => {
|
|
if (callback) callback();
|
|
bootstrap.Modal.getInstance(document.getElementById("commonModal")).hide();
|
|
};
|
|
|
|
new bootstrap.Modal(document.getElementById("commonModal")).show();
|
|
}
|
|
|
|
function showConfirm(message, title = "确认操作", onConfirm = null, onCancel = null) {
|
|
document.getElementById("commonModalTitle").innerText = title;
|
|
document.getElementById("commonModalBody").innerText = message;
|
|
|
|
const footer = document.getElementById("commonModalFooter");
|
|
footer.innerHTML = `
|
|
<button type="button" class="btn btn-secondary" id="modalCancelBtn">取消</button>
|
|
<button type="button" class="btn btn-danger" id="modalConfirmBtn">确定</button>
|
|
`;
|
|
|
|
document.getElementById("modalCancelBtn").onclick = () => {
|
|
if (onCancel) onCancel();
|
|
bootstrap.Modal.getInstance(document.getElementById("commonModal")).hide();
|
|
};
|
|
|
|
document.getElementById("modalConfirmBtn").onclick = () => {
|
|
if (onConfirm) onConfirm();
|
|
bootstrap.Modal.getInstance(document.getElementById("commonModal")).hide();
|
|
};
|
|
|
|
new bootstrap.Modal(document.getElementById("commonModal")).show();
|
|
}
|
|
</script>
|
|
<script>
|
|
let imageList = []; // 当前目录所有图片的路径
|
|
let currentIndex = 0; // 当前预览的图片下标
|
|
|
|
// 初始化：扫描页面卡片上所有图片
|
|
function collectImages() {
|
|
imageList = [];
|
|
document.querySelectorAll(".preview-img").forEach(img => {
|
|
imageList.push(img.getAttribute("data-src"));
|
|
});
|
|
}
|
|
|
|
// 打开图片预览
|
|
function openPreview(index) {
|
|
currentIndex = index;
|
|
document.getElementById("previewImage").src = imageList[currentIndex];
|
|
let modal = new bootstrap.Modal(document.getElementById("imagePreviewModal"));
|
|
modal.show();
|
|
}
|
|
|
|
// 下一张
|
|
function nextImage() {
|
|
currentIndex = (currentIndex + 1) % imageList.length;
|
|
openPreview(currentIndex);
|
|
}
|
|
|
|
// 上一张
|
|
function prevImage() {
|
|
currentIndex = (currentIndex - 1 + imageList.length) % imageList.length;
|
|
openPreview(currentIndex);
|
|
}
|
|
|
|
// 事件绑定
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
collectImages();
|
|
|
|
// 给所有 preview-img 添加点击事件
|
|
document.querySelectorAll(".preview-img").forEach((img, index) => {
|
|
img.addEventListener("click", () => openPreview(index));
|
|
});
|
|
|
|
document.getElementById("nextImage").addEventListener("click", nextImage);
|
|
document.getElementById("prevImage").addEventListener("click", prevImage);
|
|
|
|
// 支持键盘切换
|
|
document.addEventListener("keydown", (e) => {
|
|
const modalShown = document.getElementById("imagePreviewModal").classList.contains("show");
|
|
if (!modalShown) return;
|
|
|
|
if (e.key === "ArrowRight") nextImage();
|
|
else if (e.key === "ArrowLeft") prevImage();
|
|
else if (e.key === "Escape") {
|
|
bootstrap.Modal.getInstance(document.getElementById("imagePreviewModal")).hide();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
</body>
|
|
</html>
|