// 图书批量导入页面的JavaScript功能 document.addEventListener('DOMContentLoaded', function() { // 显示选择的文件名 const fileInput = document.getElementById('file'); if (fileInput) { fileInput.addEventListener('change', function() { const fileName = this.value.split('\\').pop(); const label = document.querySelector('.custom-file-label'); if (label) { label.textContent = fileName || '点击这里选择文件...'; // 添加有文件的类 if (fileName) { this.parentElement.classList.add('has-file'); // 显示文件类型检查和预览信息 checkFileAndPreview(this.files[0]); } else { this.parentElement.classList.remove('has-file'); } } }); } // 美化表单提交按钮的点击效果 const importBtn = document.querySelector('.import-btn'); if (importBtn) { importBtn.addEventListener('click', function(e) { if (!fileInput || !fileInput.files || !fileInput.files.length) { e.preventDefault(); showMessage('请先选择要导入的Excel文件', 'warning'); return; } this.innerHTML = ' 正在导入...'; this.disabled = true; // 添加花朵飘落动画效果 addFallingElements(10); }); } // 为浮动元素添加动画 initFloatingElements(); }); // 检查文件类型并尝试预览 function checkFileAndPreview(file) { if (!file) return; // 检查文件类型 const validTypes = ['.xlsx', '.xls', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel']; let isValid = false; validTypes.forEach(type => { if (file.name.toLowerCase().endsWith(type) || file.type === type) { isValid = true; } }); if (!isValid) { showMessage('请选择有效的Excel文件 (.xlsx 或 .xls)', 'warning'); return; } // 显示文件准备就绪的消息 showMessage(`文件 "${file.name}" 已准备就绪,点击"开始导入"按钮继续。`, 'success'); } // 显示提示消息 function showMessage(message, type = 'info') { // 检查是否已有消息容器 let messageContainer = document.querySelector('.import-message'); if (!messageContainer) { // 创建新的消息容器 messageContainer = document.createElement('div'); messageContainer.className = 'import-message animate__animated animate__fadeIn'; // 插入到按钮之后 const importBtn = document.querySelector('.import-btn'); if (importBtn && importBtn.parentNode) { importBtn.parentNode.insertBefore(messageContainer, importBtn.nextSibling); } } // 设置消息内容和样式 messageContainer.innerHTML = `