kaku/ComiPy
1
0
Fork 0
mirror of https://github.com/Kakune55/ComiPy.git synced 2025-05-07 02:39:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

完成上传页

Browse Source
This commit is contained in:
Kakune55 2024-04-10 17:11:24 +08:00
parent e593ba1b2d
commit af02b6f162
2 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
main.py
View File

@ -82,6 +82,17 @@ def view(bookid): # 接口
return bookid return bookid
@app.route('/upload', methods=["GET", "POST"]) #文件上传
def upload_file():
if request.method == "GET":
return render_template("upload.html")
uploaded_file = request.files['file']
if uploaded_file.filename != '':
uploaded_file.save( config.get("file", "inputdir") + "/" + uploaded_file.filename)
file.auotLoadFile()
return redirect("/")
if __name__ == "__main__": if __name__ == "__main__":
appinit() appinit()
app.run( app.run(

76
templates/upload.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<style>
#progress {
display: none;
}
</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="image/*" multiple>
</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">
文件上传成功！
</div>
</div>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();
const fileInput = document.getElementById('fileInput');
const files = fileInput.files;
if (files.length === 0) {
alert('请选择要上传的文件！');
return;
}
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
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('上传失败，请重试！');
}
};
xhr.onerror = function() {
alert('上传失败，请重试！');
};
document.getElementById('progress').style.display = 'block';
xhr.send(formData);
});
</script>
</body>
</html>