完成上传页

2025-05-06 18:29:26 +08:00 · 2024-04-10 17:11:24 +08:00 · 2024-04-10 17:11:24 +08:00 · af02b6f162
commit af02b6f162
parent e593ba1b2d
2 changed files with 87 additions and 0 deletions
--- a/main.py
+++ b/main.py
@ -82,6 +82,17 @@ def view(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__":
    appinit()
    app.run(
--- a/templates/upload.html
+++ b/templates/upload.html
@ -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>