main.html 10 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            position: relative;
            overflow: hidden;
        }

        /* 全局遮罩层 */
        #global-blur {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2); /* 半透明遮罩 */
            z-index: 2; /* 在 container 上面 */
            display: none; /* 默认隐藏，拖拽时显示 */
            pointer-events: none; /* 允许事件穿透模糊层 */
        }

        /* main 容器 */
        .container {
            z-index: 1; /* 在模糊层之下 */
            text-align: center;
            width: 600px;
            background-color: #fff;
            padding: 50px;
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            transition: filter 0.3s ease; /* 添加过渡效果 */
        }

        /* 当模糊时，应用到 container */
        .container.blurred {
            filter: blur(10px); /* 对 main 容器应用模糊效果 */
        }

        .upload-box {
            border: 2px dashed #4caf50;
            padding: 40px;
            cursor: pointer;
            border-radius: 15px;
            margin-top: 20px;
            position: relative;
        }

        .upload-box input[type="file"] {
            display: none;
        }

        .upload-box label {
            color: #4caf50;
            font-size: 20px;
            cursor: pointer;
        }

        .file-display {
            display: none;
            margin-top: 20px;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 15px;
            text-align: left;
            position: relative; /* 修正删除按钮错位问题 */
        }

        .file-display img {
            width: 40px;
            height: 40px;
            vertical-align: middle;
            margin-right: 10px;
        }

        .file-display span {
            font-size: 18px;
            font-weight: bold;
        }

        .file-display .file-size {
            font-size: 16px;
            color: #888;
        }

        .file-display .remove-btn {
            position: absolute;
            right: 10px; /* 调整删除按钮的位置 */
            top: 50%;
            transform: translateY(-50%); /* 垂直居中 */
            background-color: red;
            color: white;
            border: none;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            cursor: pointer;
            font-size: 16px;
            line-height: 22px;
            text-align: center;
        }

        .submit-button {
            display: inline-block;
            background-color: #000;
            color: white;
            padding: 15px 40px;
            border-radius: 30px;
            font-size: 18px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }

        .submit-button:hover {
            background-color: #333;
        }

        .submit-button::after {
            content: '→';
            font-size: 18px;
            margin-left: 8px;
        }

        /* 弹窗样式 */
        .popup {
            position: fixed;
            top: 35%;
            left: 30%;
            width: 40%;
            height: 30%;
            background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
            border-radius: 15px;
            display: none;
            justify-content: center;
            align-items: center;
            text-align: center;
            z-index: 9999; /* 确保弹窗在最上层 */
            color: white;
            font-size: 24px;
            font-weight: bold;
            padding: 20px;
            flex-direction: column; /* 让文字上下排列 */
            backdrop-filter: blur(5px); /* 添加背景模糊效果 */
        }

        .popup h2 {
            margin-bottom: 10px;
            font-size: 32px;
        }

        .popup p {
            font-size: 20px;
        }

        /* 美化弹窗内容 */
        .popup .upload-icon {
            font-size: 60px;
            margin-bottom: 20px;
            color: #4caf50;
        }
    </style>
</head>
<body>

    <!-- 全局模糊层 -->
    <div id="global-blur"></div>

    <div class="container" id="container">
        <h1 style="font-size: 28px;">文件上传</h1>
        <p style="font-size: 18px;">请选择一个 CSV 文件上传，我们将为您分析数据</p>

        <!-- 文件上传区域 -->
        <form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
            <div class="upload-box" id="upload-box">
                <label>点击这里或拖拽文件上传</label>
                <input id="file-upload" type="file" name="file" accept=".csv" required>
            </div>

            <!-- 文件展示区域 -->
            <div id="file-display" class="file-display">
                <img src="https://img.icons8.com/color/48/000000/csv.png" alt="CSV">
                <span id="file-name">文件名</span>
                <span class="file-size" id="file-size">大小</span>
                <button type="button" class="remove-btn" id="remove-btn">×</button>
            </div>

            <button type="submit" class="submit-button">Start now</button>
        </form>
    </div>

    <!-- 弹窗 -->
    <div class="popup" id="popup">
        <h2>文件拖拽到此处即可上传</h2>
        <p>支持的文件格式：CSV</p>
    </div>

    <script>
        const fileInput = document.getElementById('file-upload');
        const fileDisplay = document.getElementById('file-display');
        const fileNameDisplay = document.getElementById('file-name');
        const fileSizeDisplay = document.getElementById('file-size');
        const removeBtn = document.getElementById('remove-btn');
        const uploadBox = document.getElementById('upload-box');
        const popup = document.getElementById('popup');
        const globalBlur = document.getElementById('global-blur');
        const container = document.getElementById('container');

        // 点击上传区域时，触发文件选择框
        uploadBox.addEventListener('click', function() {
            fileInput.click();
        });

        // 监听文件选择事件
        fileInput.addEventListener('change', function () {
            const file = fileInput.files[0];
            if (file) {
                if (file.name.endsWith('.csv')) {
                    fileNameDisplay.textContent = file.name;
                    fileSizeDisplay.textContent = `, ${Math.round(file.size / 1024)} KB`;
                    fileDisplay.style.display = 'block';
                } else {
                    alert('只允许上传 CSV 文件');
                    fileInput.value = ''; // 清除文件
                }
                // 隐藏模糊层和弹窗
                globalBlur.style.display = 'none';
                popup.style.display = 'none';
                container.classList.remove('blurred'); // 移除模糊效果
            }
        });

        // 删除按钮逻辑
        removeBtn.addEventListener('click', function () {
            fileDisplay.style.display = 'none';
            fileInput.value = '';
            // 隐藏模糊层和弹窗
            globalBlur.style.display = 'none';
            popup.style.display = 'none';
            container.classList.remove('blurred'); // 移除模糊效果
        });

        // 监听整个页面的拖拽进入事件，显示弹窗和模糊层
        document.addEventListener('dragenter', function (e) {
            e.preventDefault();
            globalBlur.style.display = 'block'; // 显示全局模糊层
            popup.style.display = 'flex';  // 显示弹出框
            container.classList.add('blurred'); // 对 container 添加模糊效果
        });

        // 监听拖拽离开弹窗区域，隐藏弹窗和模糊层
        document.addEventListener('dragleave', function (e) {
            e.preventDefault();
            // 如果鼠标离开整个窗口，则隐藏模糊层和弹窗
            if (e.clientX <= 0 || e.clientY <= 0 || e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
                globalBlur.style.display = 'none';
                popup.style.display = 'none';
                container.classList.remove('blurred');
            }
        });

        // 在弹窗上允许拖拽
        popup.addEventListener('dragover', function (e) {
            e.preventDefault();
        });

        // 在弹窗上接收文件
        popup.addEventListener('drop', function (e) {
            e.preventDefault();
            globalBlur.style.display = 'none';
            popup.style.display = 'none';
            container.classList.remove('blurred');

            const file = e.dataTransfer.files[0];
            if (file && file.name.endsWith('.csv')) {
                fileInput.files = e.dataTransfer.files;
                const event = new Event('change');
                fileInput.dispatchEvent(event);
            } else {
                alert('只允许上传 CSV 文件');
            }
        });

        // 在页面其他地方的 drop 事件，隐藏模糊层和弹窗
        document.addEventListener('drop', function (e) {
            e.preventDefault();
            globalBlur.style.display = 'none';
            popup.style.display = 'none';
            container.classList.remove('blurred');
            // 不处理文件上传
        });

        // 防止在页面其他位置的拖拽行为
        document.addEventListener('dragover', function (e) {
            e.preventDefault();
        });
    </script>
</body>
</html>