mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-05-06 18:29:26 +08:00
修复了上传页面无法正常显示进度条的问题 支持多文件上传
This commit is contained in:
parent
80014a268d
commit
59df4edf77
10
file.py
10
file.py
@ -5,12 +5,12 @@ from PIL import Image
|
||||
app_conf = app_conf.conf()
|
||||
|
||||
def init():
|
||||
paths = ("inputdir","storedir","tmpdir")
|
||||
for path in paths:
|
||||
try:
|
||||
os.makedirs(app_conf.get("file", "inputdir"))
|
||||
os.makedirs(app_conf.get("file", "storedir"))
|
||||
os.makedirs(app_conf.get("file", "tmpdir"))
|
||||
except:
|
||||
pass
|
||||
os.makedirs(app_conf.get("file", path))
|
||||
except Exception as e:
|
||||
print(e)
|
||||
|
||||
|
||||
def auotLoadFile():
|
||||
|
||||
2
main.py
2
main.py
@ -5,6 +5,7 @@ from flask import *
|
||||
|
||||
from web.api_Img import api_Img_bp
|
||||
from web.page import page_bp
|
||||
from web.admin_page import admin_page_bp
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
@ -18,6 +19,7 @@ def appinit():
|
||||
|
||||
app.register_blueprint(api_Img_bp)
|
||||
app.register_blueprint(page_bp)
|
||||
app.register_blueprint(admin_page_bp)
|
||||
|
||||
if __name__ == "__main__":
|
||||
appinit()
|
||||
|
||||
@ -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>
|
||||
<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 class="col-md-2">
|
||||
<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>
|
||||
|
||||
<div class="alert alert-success mt-3 d-none" id="uploadSuccess" role="alert">
|
||||
文件上传成功！
|
||||
<button onclick="window.location.href='/'">返回首页</button>
|
||||
</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;
|
||||
}
|
||||
|
||||
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');
|
||||
if (loading === 100) {
|
||||
loading_dom.innerHTML = "上传成功^_^";
|
||||
} else {
|
||||
alert('上传失败，请重试！');
|
||||
loading_dom.innerHTML = "上传进度" + loading + "%";
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
alert('上传失败，请重试！');
|
||||
};
|
||||
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;
|
||||
}
|
||||
|
||||
document.getElementById('progress').style.display = 'block';
|
||||
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>
|
||||
|
||||
26
web/admin_page.py
Normal file
26
web/admin_page.py
Normal 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
19
web/page.py
@ -63,25 +63,12 @@ def upload_file():
|
||||
if request.method == "GET":
|
||||
return render_template("upload.html")
|
||||
uploaded_file = request.files.getlist("files[]") # 获取上传的文件列表
|
||||
print(uploaded_file)
|
||||
for fileitem in uploaded_file:
|
||||
if fileitem.filename != "":
|
||||
fileitem.save(conf.get("file", "inputdir") + "/" + fileitem.filename)
|
||||
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("/")
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user