137 lines
3.9 KiB
HTML
137 lines
3.9 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>
|
|
.upload-area {
|
|
border: 2px dashed #0d6efd;
|
|
border-radius: 10px;
|
|
padding: 40px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: 0.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>文件列表</h4>
|
|
<ul class="list-group mt-3">
|
|
{{ range .files }}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span>{{ . }}</span>
|
|
<div>
|
|
<a class="btn btn-primary btn-sm me-2" href="/download/{{ . }}">下载</a>
|
|
<button class="btn btn-danger btn-sm" onclick="deleteFile('{{ . }}')">删除</button>
|
|
</div>
|
|
</li>
|
|
{{ else }}
|
|
<li class="list-group-item">暂无文件</li>
|
|
{{ end }}
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
<script>
|
|
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();
|
|
for (let f of files) {
|
|
formData.append("files", f);
|
|
}
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/upload");
|
|
|
|
progressBox.classList.remove("d-none");
|
|
|
|
xhr.upload.onprogress = event => {
|
|
let percent = Math.round((event.loaded / event.total) * 100);
|
|
progressBar.style.width = percent + "%";
|
|
progressBar.innerText = percent + "%";
|
|
};
|
|
|
|
xhr.onload = () => {
|
|
if (xhr.status === 200) {
|
|
alert("上传成功！");
|
|
location.reload();
|
|
} else {
|
|
alert("上传失败！");
|
|
}
|
|
};
|
|
|
|
xhr.send(formData);
|
|
}
|
|
|
|
function deleteFile(name) {
|
|
if (!confirm("确定删除文件：" + name + " ?")) {
|
|
return;
|
|
}
|
|
|
|
fetch("/delete/" + name, {
|
|
method: "DELETE"
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.message) {
|
|
alert("删除成功！");
|
|
location.reload();
|
|
} else {
|
|
alert("删除失败：" + data.error);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|