89 lines
3.6 KiB
HTML
89 lines
3.6 KiB
HTML
<!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>
|