mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-09-15 19:59:39 +08:00
164 lines
5.1 KiB
HTML
164 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
|
|
<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>ComiPy-上传文件</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Google Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
color: #202124;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 24px 16px;
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
margin-top: 40px;
|
|
box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
|
|
}
|
|
|
|
h2 {
|
|
color: #1a73e8;
|
|
font-weight: 400;
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-control {
|
|
border: 1px solid #dadce0;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: #1a73e8;
|
|
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #1a73e8;
|
|
border: 1px solid #1a73e8;
|
|
color: #ffffff;
|
|
padding: 12px 24px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #1557b0;
|
|
border-color: #1557b0;
|
|
}
|
|
|
|
.progress {
|
|
background-color: #f1f3f4;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
#progress_bar {
|
|
background-color: #1a73e8;
|
|
height: 8px;
|
|
width: 0;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
#loading {
|
|
margin-top: 12px;
|
|
color: #5f6368;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container mt-5">
|
|
<h2 class="text-center text-primary mb-4">文件上传</h2>
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="input-group mb-3">
|
|
<input type="file" class="form-control" id="avatar" accept=".zip" multiple>
|
|
<button class="btn btn-primary btn-block" onclick="to_upload_file()" id="upload_button">上传</button>
|
|
</div>
|
|
</div>
|
|
<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="0"
|
|
aria-valuemin="0" aria-valuemax="100">
|
|
<div id="progress_bar" class="progress-bar progress-bar-striped progress-bar-animated"></div>
|
|
</div>
|
|
<div class="text-center" id="loading">上传进度0%</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="/static/js/jquery.min.js"></script>
|
|
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
|
<script src="/static/js/bootstrap.min.js"></script>
|
|
|
|
<script>
|
|
// 处理上传进度
|
|
const upload_button = document.getElementById("upload_button");
|
|
function progressFunction(e) {
|
|
var progress_bar = document.getElementById("progress_bar");
|
|
var loading_dom = document.getElementById("loading");
|
|
var loading = Math.round(e.loaded / e.total * 100);
|
|
console.log("loading::", loading);
|
|
|
|
if (loading === 100) {
|
|
loading_dom.innerHTML = "上传成功^_^";
|
|
} else {
|
|
loading_dom.innerHTML = "上传进度" + loading + "%";
|
|
}
|
|
|
|
progress_bar.style.width = String(loading) + "%";
|
|
}
|
|
// 上传成功
|
|
function uploadComplete(e) {
|
|
console.log("上传成功！", e);
|
|
upload_button.disabled = fasle;
|
|
}
|
|
// 上传失败
|
|
function uploadFailed(e) {
|
|
console.log("上传失败", e);
|
|
upload_button.disabled = fasle;
|
|
}
|
|
|
|
function to_upload_file() {
|
|
var files = document.getElementById("avatar").files;
|
|
if (files.length > 0) {
|
|
var url = "/upload";
|
|
var formData = new FormData();
|
|
for (var i = 0; i < files.length; i++) {
|
|
formData.append("files[]", files[i]);
|
|
}
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onload = uploadComplete; // 添加 上传成功后的回调函数
|
|
xhr.onerror = uploadFailed; // 添加 上传失败后的回调函数
|
|
xhr.upload.onprogress = progressFunction; // 添加 监听函数
|
|
xhr.open("POST", url, true);
|
|
xhr.send(formData);
|
|
} else {
|
|
alert("请先选择文件后再上传");
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |