genealogy-app/templates/upload.html

{% extends "layout.html" %}

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

{% block extra_css %}
<style>
    .drop-shadow { filter: drop-shadow(0 0 4px rgba(0,0,0,0.5)); }
</style>
{% 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" id="globalPageWrapper">
                        <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 id="previewContainer" class="mb-4" style="display: none;">
                        <label class="form-label fw-bold">文件预览及页码设置</label>
                        <div class="row g-3" id="previewGrid">
                        </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>

<!-- 放大查看图片的模态框 -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true" style="z-index: 1060;">
    <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 95vw;">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-header border-0 pb-0 position-absolute top-0 end-0" style="z-index: 1070;">
                <button type="button" class="btn-close btn-close-white bg-dark p-2 rounded-circle shadow" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0 text-center position-relative d-flex justify-content-center align-items-center" style="min-height: 50vh;">
                <img id="largePreviewImage" src="" class="img-fluid rounded shadow-lg" style="max-height: 90vh; max-width: 100%; object-fit: contain; pointer-events: none;">
                
                <!-- 切换按钮 -->
                <button class="btn btn-dark position-absolute top-50 start-0 translate-middle-y ms-3 ms-md-5 rounded-circle shadow" id="prevImageBtn" style="width: 48px; height: 48px; opacity: 0.8; z-index: 1065;">
                    <i class="bi bi-chevron-left fs-4"></i>
                </button>
                <button class="btn btn-dark position-absolute top-50 end-0 translate-middle-y me-3 me-md-5 rounded-circle shadow" id="nextImageBtn" style="width: 48px; height: 48px; opacity: 0.8; z-index: 1065;">
                    <i class="bi bi-chevron-right fs-4"></i>
                </button>
                
                <!-- 页码指示器 -->
                <div class="position-absolute bottom-0 start-50 translate-middle-x mb-3" style="z-index: 1065;">
                    <span class="badge bg-dark bg-opacity-75 fs-6 px-3 py-2 rounded-pill shadow" id="imageIndexIndicator">1 / 1</span>
                </div>
            </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);
    });

    let currentPreviewFiles = [];
    let currentPreviewIndex = 0;
    
    // 暴露函数到全局以确保 onclick 能找到
    window.showLargePreview = function(index) {
        if (currentPreviewFiles.length === 0 || index < 0 || index >= currentPreviewFiles.length) {
            return;
        }
        
        currentPreviewIndex = index;
        const file = currentPreviewFiles[index];
        const objectUrl = URL.createObjectURL(file);
        
        const imgEl = document.getElementById('largePreviewImage');
        imgEl.src = objectUrl;
        
        document.getElementById('imageIndexIndicator').textContent = `${index + 1} / ${currentPreviewFiles.length}`;
        
        // Update button states
        document.getElementById('prevImageBtn').style.display = index === 0 ? 'none' : 'block';
        document.getElementById('nextImageBtn').style.display = index === currentPreviewFiles.length - 1 ? 'none' : 'block';
        
        // 使用原生 Bootstrap API 显示模态框
        const modalEl = document.getElementById('imagePreviewModal');
        let modal = bootstrap.Modal.getInstance(modalEl);
        if (!modal) {
            modal = new bootstrap.Modal(modalEl);
        }
        
        // Ensure image fits vertically
        imgEl.style.maxHeight = '85vh';
        imgEl.style.maxWidth = '100%';
        imgEl.style.objectFit = 'contain';
        imgEl.style.pointerEvents = 'auto'; // allow user interaction if needed
        
        modal.show();
    };
    
    document.getElementById('prevImageBtn').addEventListener('click', (e) => {
        e.stopPropagation();
        if (currentPreviewIndex > 0) window.showLargePreview(currentPreviewIndex - 1);
    });
    
    document.getElementById('nextImageBtn').addEventListener('click', (e) => {
        e.stopPropagation();
        if (currentPreviewIndex < currentPreviewFiles.length - 1) window.showLargePreview(currentPreviewIndex + 1);
    });
    
    // Keyboard navigation
    document.getElementById('imagePreviewModal').addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') {
            if (currentPreviewIndex > 0) window.showLargePreview(currentPreviewIndex - 1);
        } else if (e.key === 'ArrowRight') {
            if (currentPreviewIndex < currentPreviewFiles.length - 1) window.showLargePreview(currentPreviewIndex + 1);
        }
    });

    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
            document.getElementById('previewContainer').style.display = 'none';
            document.getElementById('globalPageWrapper').style.display = 'block';
            return;
        } else if (pdfCount > 0 && files.length > 1) {
            alert('上传PDF时，一次只能选择1个文件。');
            e.target.value = ''; // clear selection
            document.getElementById('previewContainer').style.display = 'none';
            document.getElementById('globalPageWrapper').style.display = 'block';
            return;
        }
        
        const previewContainer = document.getElementById('previewContainer');
        const previewGrid = document.getElementById('previewGrid');
        const globalPageWrapper = document.getElementById('globalPageWrapper');
        
        previewGrid.innerHTML = '';
        
        if (files.length > 0) {
            previewContainer.style.display = 'block';
            if (imgCount > 0) {
                // Hide global page input for images, as we will set them individually
                globalPageWrapper.style.display = 'none';
                
                let startPage = parseInt('{{ suggested_page }}') || 1;
                
                currentPreviewFiles = []; // Reset current preview files
                
                Array.from(files).forEach((file, index) => {
                    if (file.type.startsWith('image/') || !file.name.toLowerCase().endsWith('.pdf')) {
                        currentPreviewFiles.push(file);
                    }
                });
                
                let imageIndexCounter = 0;

                Array.from(files).forEach((file, index) => {
                    const isImage = file.type.startsWith('image/') || !file.name.toLowerCase().endsWith('.pdf');
                    if (!isImage) return; // Skip non-images
                    
                    const currentIndex = imageIndexCounter++;
                    const objectUrl = URL.createObjectURL(file);
                    const col = document.createElement('div');
                    col.className = 'col-md-6 col-lg-4';
                    col.innerHTML = `
                        <div class="card h-100">
                            <div class="position-relative preview-click-area" data-index="${currentIndex}" style="cursor: pointer;">
                                <img src="${objectUrl}" class="card-img-top" style="height: 200px; object-fit: cover; background: #f8f9fa; transition: opacity 0.2s;" alt="预览图" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
                                <div class="position-absolute top-50 start-50 translate-middle text-white" style="opacity: 0; transition: opacity 0.2s; pointer-events: none;" onmouseover="this.parentElement.querySelector('img').style.opacity='0.8'; this.style.opacity='1'" onmouseout="this.parentElement.querySelector('img').style.opacity='1'; this.style.opacity='0'">
                                    <i class="bi bi-zoom-in fs-1 drop-shadow"></i>
                                </div>
                            </div>
                            <div class="card-body p-2 border-top">
                                <div class="text-truncate small mb-2 text-muted" title="${file.name}">${file.name}</div>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text bg-light text-secondary">指定页码</span>
                                    <input type="number" name="page_number_${index}" class="form-control" value="${startPage + currentIndex}">
                                </div>
                            </div>
                        </div>
                    `;
                    
                    // Bind click event safely
                    const clickArea = col.querySelector('.preview-click-area');
                    if (clickArea) {
                        clickArea.addEventListener('click', function(evt) {
                            evt.preventDefault();
                            evt.stopPropagation();
                            window.showLargePreview(currentIndex);
                        });
                    }
                    
                    previewGrid.appendChild(col);
                });
            } else if (pdfCount > 0) {
                // For PDF, keep the global page input
                globalPageWrapper.style.display = 'block';
                
                const col = document.createElement('div');
                col.className = 'col-12';
                col.innerHTML = `
                    <div class="alert alert-secondary d-flex align-items-center mb-0">
                        <i class="bi bi-file-earmark-pdf fs-3 me-3 text-danger"></i>
                        <div>
                            <strong>${files[0].name}</strong><br>
                            <span class="small text-muted">PDF文件将自动按页拆分处理</span>
                        </div>
                    </div>
                `;
                previewGrid.appendChild(col);
            }
        } else {
            previewContainer.style.display = 'none';
            globalPageWrapper.style.display = 'block';
        }
    });
</script>
{% endblock %}