Add resumable upload feature with progress display

- Implement chunked file upload with 1MB chunk size
- Add progress bar with percentage and chunk counter (e.g., 2/5)
- Support resuming interrupted uploads
- Improve UI with better progress visualization
- Add dropzone.js integration for drag-and-drop uploads
- Fix progress bar jumping issue in resumable uploads
- Add file type icons and size display
- Enhance error handling and user feedback
This commit is contained in:
admin
2026-01-23 15:29:26 +08:00
parent 88db4903c9
commit 6f3cc6b725
6 changed files with 551 additions and 242 deletions

View File

@@ -6,6 +6,7 @@
<title>📁 文件管理器</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📁</text></svg>">
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/dropzone.min.css">
</head>
<body>
<div class="container">
@@ -124,16 +125,14 @@
<button class="modal-close" id="upload-close">&times;</button>
</div>
<div class="modal-body">
<div class="upload-list" id="upload-list"></div>
<div class="upload-progress-container" id="upload-progress-container">
<div class="upload-progress-bar" id="upload-progress-bar"></div>
</div>
<div class="upload-stats" id="upload-stats"></div>
<div class="upload-speed" id="upload-speed"></div>
<form action="/api/upload" class="dropzone" id="upload-dropzone">
<input type="hidden" name="path" id="upload-path" value="/">
<div class="dz-message">拖拽文件到此处或点击上传</div>
</form>
<div class="upload-file-list" id="upload-file-list"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="upload-cancel" style="display: none;">取消</button>
<button class="btn btn-primary" id="upload-confirm" style="display: none;">完成</button>
<button class="btn btn-primary" id="upload-close-btn">关闭</button>
</div>
</div>
</div>
@@ -160,8 +159,7 @@
<div class="notification" id="notification"></div>
<input type="file" id="file-input" multiple style="display: none;">
<script src="/static/dropzone.min.js"></script>
<script src="/static/app.js"></script>
</body>
</html>