genealogy-app/templates/upload.html

{% extends "layout.html" %}

{% block title %}上传文件 - 家谱管理系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-cloud-upload me-2"></i>上传家谱扫描件</h5>
            </div>
            <div class="card-body p-4">
                <form method="POST" enctype="multipart/form-data" id="uploadForm">
                    <div class="mb-4">
                        <label class="form-label fw-bold">选择文件</label>
                        <input type="file" name="file" id="fileInput" class="form-control form-control-lg" multiple accept=".jpg,.jpeg,.png,.pdf" required>
                        <div class="form-text mt-2">
                            支持图片 (JPG, PNG) 或 PDF 格式的扫描件。图片支持多选（一次最多10张）。PDF文件会自动按页拆分提取。上传后将自动识别或提取页码。
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">版本名称 <span class="text-danger">*</span></label>
                            <input type="text" name="genealogy_version" class="form-control" placeholder="如：衢州1926版" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">版本来源 <span class="text-danger">*</span></label>
                            <input type="text" name="genealogy_source" class="form-control" placeholder="如：留越收藏" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">文件提供人</label>
                            <input type="text" name="upload_person" class="form-control" placeholder="默认：当前系统登录账号">
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">手动指定页码 (可选)</label>
                        <div class="input-group">
                            <input type="number" name="manual_page" id="initialPage" class="form-control" placeholder="如不输入则由 OCR 自动识别">
                            <button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('initialPage').value = {{ suggested_page }}">
                                提示：第 {{ suggested_page }} 页？
                            </button>
                        </div>
                        <div class="form-text mt-1 text-muted">
                            建议值为当前数据库最大页码 + 1。
                        </div>
                    </div>
                    
                    <div class="alert alert-warning mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        提示：文件将上传至云端 OSS 存储，处理过程可能需要几秒钟。
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('index') }}" class="btn btn-light px-4">取消</a>
                        <button type="submit" class="btn btn-primary px-5" id="submitBtn">
                            <i class="bi bi-check-lg me-1"></i> 开始上传
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.getElementById('uploadForm').addEventListener('submit', function(e) {
        // Prevent multiple submissions
        const btn = document.getElementById('submitBtn');
        if (btn.classList.contains('disabled')) {
            e.preventDefault();
            return;
        }
        
        // Show loading state without blocking submit
        btn.classList.add('disabled');
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 上传处理中...';
        
        // Disable after a tiny delay to ensure form submission proceeds
        setTimeout(() => {
            btn.disabled = true;
        }, 10);
    });

    document.getElementById('fileInput').addEventListener('change', function(e) {
        let files = e.target.files;
        let pdfCount = 0;
        let imgCount = 0;

        for (let i = 0; i < files.length; i++) {
            if (files[i].type === 'application/pdf' || files[i].name.toLowerCase().endsWith('.pdf')) {
                pdfCount++;
            } else {
                imgCount++;
            }
        }

        if (imgCount > 10) {
            alert('一次最多只能上传10张图片，请重新选择。');
            e.target.value = ''; // clear selection
        } else if (pdfCount > 0 && files.length > 1) {
            alert('上传PDF时，一次只能选择1个文件。');
            e.target.value = ''; // clear selection
        }
    });
</script>
{% endblock %}