kaku/ComiPy
1
0
Fork 0
mirror of https://github.com/Kakune55/ComiPy.git synced 2025-05-06 18:29:26 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
file.py
View File

@ -5,12 +5,12 @@ from PIL import Image
app_conf = app_conf.conf() app_conf = app_conf.conf()
def init(): def init():
try: paths = ("inputdir","storedir","tmpdir")
os.makedirs(app_conf.get("file", "inputdir")) for path in paths:
os.makedirs(app_conf.get("file", "storedir")) try:
os.makedirs(app_conf.get("file", "tmpdir")) os.makedirs(app_conf.get("file", path))
except: except Exception as e:
pass print(e)
def auotLoadFile(): def auotLoadFile():

2
main.py
View File

@ -5,6 +5,7 @@ from flask import *
from web.api_Img import api_Img_bp from web.api_Img import api_Img_bp
from web.page import page_bp from web.page import page_bp
from web.admin_page import admin_page_bp
app = Flask(__name__) app = Flask(__name__)
@ -18,6 +19,7 @@ def appinit():
app.register_blueprint(api_Img_bp) app.register_blueprint(api_Img_bp)
app.register_blueprint(page_bp) app.register_blueprint(page_bp)
app.register_blueprint(admin_page_bp)
if __name__ == "__main__": if __name__ == "__main__":
appinit() appinit()

116
templates/upload.html
View File

@ -3,75 +3,87 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link href="/static/css/bootstrap.min.css" rel="stylesheet">
<style> <style>
#progress { /* Custom styles */
display: none; #progress_bar {
width: 0;
background-color: #64B587;
height: 20px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container mt-5"> <div class="container mt-5">
<h1 class="mb-3">文件上传</h1> <h2 class="text-center text-primary mb-4">文件上传</h2>
<form id="uploadForm"> <div class="row justify-content-center mb-4">
<div class="mb-3"> <div class="col-md-6">
<input type="file" class="form-control" id="fileInput" accept=".zip" multiple> <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> </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>
<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> </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> <script>
document.getElementById('uploadForm').addEventListener('submit', function(event) { // 处理上传进度
event.preventDefault(); const upload_button = document.getElementById("upload_button");
const fileInput = document.getElementById('fileInput'); function progressFunction(e) {
const files = fileInput.files; 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) { if (loading === 100) {
alert('请选择要上传的文件！'); loading_dom.innerHTML = "上传成功^_^";
return; } else {
loading_dom.innerHTML = "上传进度" + loading + "%";
} }
const formData = new FormData(); progress_bar.style.width = String(loading) + "%";
for (let i = 0; i < files.length; i++) { }
formData.append('files[]', files[i]); // 上传成功
} function uploadComplete(e) {
console.log("上传成功！", e);
upload_button.disabled = fasle;
}
// 上传失败
function uploadFailed(e) {
console.log("上传失败", e);
upload_button.disabled = fasle;
}
const xhr = new XMLHttpRequest(); function to_upload_file() {
xhr.open('POST', '/upload', true); var files = document.getElementById("avatar").files;
if (files.length > 0) {
xhr.upload.onprogress = function(e) { var url = "/upload";
const percent = (e.loaded / e.total) * 100; var formData = new FormData();
document.querySelector('.progress-bar').style.width = percent + '%'; for (var i = 0; i < files.length; i++) {
document.querySelector('.progress-bar').setAttribute('aria-valuenow', percent); formData.append("files[]", files[i]);
};
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('progress').style.display = 'none';
document.getElementById('uploadSuccess').classList.remove('d-none');
} else {
alert('上传失败，请重试！');
} }
}; var xhr = new XMLHttpRequest();
xhr.onload = uploadComplete; // 添加 上传成功后的回调函数
xhr.onerror = function() { xhr.onerror = uploadFailed; // 添加 上传失败后的回调函数
alert('上传失败，请重试！'); xhr.upload.onprogress = progressFunction; // 添加 监听函数
}; xhr.open("POST", url, true);
xhr.send(formData);
document.getElementById('progress').style.display = 'block'; } else {
xhr.send(formData); alert("请先选择文件后再上传");
}); }
}
</script> </script>
</body> </body>
</html> </html>

26
web/admin_page.py Normal file
View File

@ -0,0 +1,26 @@
from flask import *
from flask import Blueprint
import time
import db.file, file , app_conf
admin_page_bp = Blueprint("admin_page_bp", __name__)
conf = app_conf.conf()
# 管理页
@admin_page_bp.route("/", methods=["GET", "POST"])
def login(): # 登录页面
if request.method == "GET":
if request.cookies.get("islogin") is not None:
return redirect("/overview/1")
return render_template("login.html")
elif request.method == "POST":
if request.form["username"] == conf.get("user", "username") and request.form[
"password"
] == conf.get("user", "password"):
resp = make_response(redirect("/overview/1"))
resp.set_cookie("islogin", "True")
return resp
else:
return redirect("/")

19
web/page.py
View File

@ -63,25 +63,12 @@ def upload_file():
if request.method == "GET": if request.method == "GET":
return render_template("upload.html") return render_template("upload.html")
uploaded_file = request.files.getlist("files[]") # 获取上传的文件列表 uploaded_file = request.files.getlist("files[]") # 获取上传的文件列表
print(uploaded_file)
for fileitem in uploaded_file: for fileitem in uploaded_file:
if fileitem.filename != "": if fileitem.filename != "":
fileitem.save(conf.get("file", "inputdir") + "/" + fileitem.filename) fileitem.save(conf.get("file", "inputdir") + "/" + fileitem.filename)
file.auotLoadFile() file.auotLoadFile()
return redirect("/") return "success"
@page_bp.route("/", methods=["GET", "POST"])
def login(): # 登录页面
if request.method == "GET":
if request.cookies.get("islogin") is not None:
return redirect("/overview/1")
return render_template("login.html")
elif request.method == "POST":
if request.form["username"] == conf.get("user", "username") and request.form[
"password"
] == conf.get("user", "password"):
resp = make_response(redirect("/overview/1"))
resp.set_cookie("islogin", "True")
return resp
else:
return redirect("/")