feat: 支持多图像上传和预览
This commit is contained in:
14
index.html
14
index.html
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user