feat: 支持多图像上传和预览

This commit is contained in:
2025-09-04 08:56:00 +08:00
parent 37a31f7264
commit 72f9666421
2 changed files with 37 additions and 21 deletions

View File

@@ -88,19 +88,21 @@
<div class="mb-4">
<h5><i class="fas fa-upload me-2"></i>上传参考图像</h5>
<div class="row">
<div class="col-md-6">
<div class="col-md-4">
<div class="border-2 border-dashed rounded p-4 text-center h-100 d-flex flex-column justify-content-center" id="dropZone">
<i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
<p class="text-muted">拖拽图像到此处或点击选择文件</p>
<input type="file" class="d-none" id="imageInput" accept="image/*">
<p class="text-muted">拖拽图像到此处或点击选择文件 (最多10张)</p>
<input type="file" class="d-none" id="imageInput" accept="image/*" multiple>
<button class="btn btn-outline-primary" onclick="document.getElementById('imageInput').click()">
选择图像
</button>
</div>
</div>
<div class="col-md-6">
<div id="imagePreview" class="h-100 d-flex align-items-center justify-content-center">
<p class="text-muted">未选择图像</p>
<div class="col-md-8">
<div class="row" id="imagePreview" style="max-height: 250px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: .25rem; padding-top: 1rem;">
<div class="col-12 d-flex h-100 align-items-center justify-content-center">
<p class="text-muted">未选择图像</p>
</div>
</div>
</div>
</div>