kaku/ComiPy
1
0
Fork 0
mirror of https://github.com/Kakune55/ComiPy.git synced 2025-09-15 11:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复了上传页面无法正常显示进度条的问题 支持多文件上传

Browse Source
This commit is contained in:
Kakune55
2024-04-17 11:43:29 +08:00
parent 80014a268d
commit 59df4edf77
5 changed files with 101 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
templates/upload.html
View File

@@ -3,75 +3,87 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>上传文件</title>
<!-- Bootstrap CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<style>
#progress {
display: none;
/* Custom styles */
#progress_bar {
width: 0;
background-color: #64B587;
height: 20px;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="mb-3">文件上传</h1>
<form id="uploadForm">
<div class="mb-3">
<input type="file" class="form-control" id="fileInput" accept=".zip" multiple>
<h2 class="text-center text-primary mb-4">文件上传</h2>
<div class="row justify-content-center mb-4">
<div class="col-md-6">
<input type="file" class="form-control" id="avatar" accept=".zip" multiple>
</div>
<div class="col-md-2">
<button class="btn btn-primary btn-block" onclick="to_upload_file()" id="upload_button">上传</button>
</div>
<button type="submit" class="btn btn-primary">上传</button>
</form>
<div class="progress mt-3" id="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="alert alert-success mt-3 d-none" id="uploadSuccess" role="alert">
文件上传成功！
<button onclick="window.location.href='/'">返回首页</button>
</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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
const fileInput = document.getElementById('fileInput');
const files = fileInput.files;
// 处理上传进度
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 (files.length === 0) {
alert('请选择要上传的文件！');
return;
if (loading === 100) {
loading_dom.innerHTML = "上传成功^_^";
} else {
loading_dom.innerHTML = "上传进度" + loading + "%";
}
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
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;
}
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function(e) {
const percent = (e.loaded / e.total) * 100;
document.querySelector('.progress-bar').style.width = percent + '%';
document.querySelector('.progress-bar').setAttribute('aria-valuenow', percent);
};
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('progress').style.display = 'none';
document.getElementById('uploadSuccess').classList.remove('d-none');
} else {
alert('上传失败，请重试！');
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]);
}
};
xhr.onerror = function() {
alert('上传失败，请重试！');
};
document.getElementById('progress').style.display = 'block';
xhr.send(formData);
});
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>