mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-05-06 18:29:26 +08:00
91 lines
3.3 KiB
HTML
91 lines
3.3 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>
|
|
/* Custom styles */
|
|
#progress_bar {
|
|
width: 0;
|
|
background-color: #64B587;
|
|
height: 20px;
|
|
}
|
|
</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> |