GuangYu/UploaderHui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Nelson
2026-04-18 15:08:57 +08:00
commit 2a67f56512
13 changed files with 2729 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
nas-uploader/templates/index.html Normal file
View File

@@ -0,0 +1,88 @@
<!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 rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<div class="container">
<!-- 顶部标题 -->
<header class="header">
<h1>📷 训练营图片上传</h1>
<p class="subtitle">选择训练营和班级，上传截图文件</p>
</header>
<!-- 文件夹选择区 -->
<section class="folder-section">
<div class="form-group">
<label for="camp-select">选择训练营</label>
<select id="camp-select">
<option value="">-- 请选择训练营 --</option>
</select>
</div>
<div class="form-group">
<label for="class-select">选择班级</label>
<select id="class-select" disabled>
<option value="">-- 请先选择训练营 --</option>
</select>
</div>
</section>
<!-- 图片选择和上传区 -->
<section class="upload-section">
<div class="select-area" id="select-area">
<div class="select-icon">📁</div>
<p>点击下方按钮选择图片</p>
<p class="hint">支持 JPG / PNG / GIF / WEBP，单张不超过 20MB，最多 100 张</p>
<button class="btn btn-primary" id="btn-select" onclick="document.getElementById('file-input').click()">
选择图片
</button>
<input type="file" id="file-input" accept="image/jpeg,image/png,image/gif,image/webp" multiple hidden>
</div>
<!-- 已选图片预览 -->
<div class="preview-section" id="preview-section" style="display:none;">
<div class="preview-header">
<span>已选择 <strong id="selected-count">0</strong> 张图片</span>
<button class="btn btn-small btn-danger" id="btn-clear-all">清空全部</button>
</div>
<div class="preview-grid" id="preview-grid"></div>
<button class="btn btn-primary btn-large" id="btn-upload" disabled>
开始上传
</button>
</div>
<!-- 上传进度区 -->
<div class="progress-section" id="progress-section" style="display:none;">
<div class="progress-header">
<span id="progress-text">上传中... 0 / 0</span>
<span id="progress-percent">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
<div class="file-progress-list" id="file-progress-list"></div>
</div>
</section>
<!-- 上传结果区 -->
<section class="result-section" id="result-section" style="display:none;">
<div class="result-header">
<h2>上传结果</h2>
<p id="result-summary"></p>
</div>
<div class="result-grid" id="result-grid"></div>
<button class="btn btn-primary" id="btn-retry" style="display:none;">
重试失败的图片
</button>
<button class="btn btn-secondary" id="btn-new-upload">
继续上传
</button>
</section>
</div>
<script src="/static/js/app.js"></script>
</body>
</html>