万朱浩 / Venue-Ops

Go to a project
Toggle navigation Toggle navigation pinning
juanboy
440e3c3b 1 parent 70b54530

preliminary realize main.html

Inline Side-by-side
Showing 1 changed file with 311 additions and 0 deletions
  1 +<!DOCTYPE html>
  2 +<html lang="zh">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 + <title>文件上传</title>
  7 + <style>
  8 + body {
  9 + font-family: Arial, sans-serif;
  10 + background-color: #f4f4f4;
  11 + display: flex;
  12 + justify-content: center;
  13 + align-items: center;
  14 + height: 100vh;
  15 + margin: 0;
  16 + position: relative;
  17 + overflow: hidden;
  18 + }
  19 +
  20 + /* 全局遮罩层 */
  21 + #global-blur {
  22 + position: fixed;
  23 + top: 0;
  24 + left: 0;
  25 + width: 100%;
  26 + height: 100%;
  27 + background-color: rgba(0, 0, 0, 0.2); /* 半透明遮罩 */
  28 + z-index: 2; /* 在 container 上面 */
  29 + display: none; /* 默认隐藏，拖拽时显示 */
  30 + pointer-events: none; /* 允许事件穿透模糊层 */
  31 + }
  32 +
  33 + /* main 容器 */
  34 + .container {
  35 + z-index: 1; /* 在模糊层之下 */
  36 + text-align: center;
  37 + width: 600px;
  38 + background-color: #fff;
  39 + padding: 50px;
  40 + border-radius: 15px;
  41 + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  42 + transition: filter 0.3s ease; /* 添加过渡效果 */
  43 + }
  44 +
  45 + /* 当模糊时，应用到 container */
  46 + .container.blurred {
  47 + filter: blur(10px); /* 对 main 容器应用模糊效果 */
  48 + }
  49 +
  50 + .upload-box {
  51 + border: 2px dashed #4caf50;
  52 + padding: 40px;
  53 + cursor: pointer;
  54 + border-radius: 15px;
  55 + margin-top: 20px;
  56 + position: relative;
  57 + }
  58 +
  59 + .upload-box input[type="file"] {
  60 + display: none;
  61 + }
  62 +
  63 + .upload-box label {
  64 + color: #4caf50;
  65 + font-size: 20px;
  66 + cursor: pointer;
  67 + }
  68 +
  69 + .file-display {
  70 + display: none;
  71 + margin-top: 20px;
  72 + padding: 20px;
  73 + background-color: #f9f9f9;
  74 + border: 1px solid #ddd;
  75 + border-radius: 15px;
  76 + text-align: left;
  77 + position: relative; /* 修正删除按钮错位问题 */
  78 + }
  79 +
  80 + .file-display img {
  81 + width: 40px;
  82 + height: 40px;
  83 + vertical-align: middle;
  84 + margin-right: 10px;
  85 + }
  86 +
  87 + .file-display span {
  88 + font-size: 18px;
  89 + font-weight: bold;
  90 + }
  91 +
  92 + .file-display .file-size {
  93 + font-size: 16px;
  94 + color: #888;
  95 + }
  96 +
  97 + .file-display .remove-btn {
  98 + position: absolute;
  99 + right: 10px; /* 调整删除按钮的位置 */
  100 + top: 50%;
  101 + transform: translateY(-50%); /* 垂直居中 */
  102 + background-color: red;
  103 + color: white;
  104 + border: none;
  105 + border-radius: 50%;
  106 + width: 25px;
  107 + height: 25px;
  108 + cursor: pointer;
  109 + font-size: 16px;
  110 + line-height: 22px;
  111 + text-align: center;
  112 + }
  113 +
  114 + .submit-button {
  115 + display: inline-block;
  116 + background-color: #000;
  117 + color: white;
  118 + padding: 15px 40px;
  119 + border-radius: 30px;
  120 + font-size: 18px;
  121 + font-weight: bold;
  122 + border: none;
  123 + cursor: pointer;
  124 + margin-top: 20px;
  125 + }
  126 +
  127 + .submit-button:hover {
  128 + background-color: #333;
  129 + }
  130 +
  131 + .submit-button::after {
  132 + content: '→';
  133 + font-size: 18px;
  134 + margin-left: 8px;
  135 + }
  136 +
  137 + /* 弹窗样式 */
  138 + .popup {
  139 + position: fixed;
  140 + top: 35%;
  141 + left: 30%;
  142 + width: 40%;
  143 + height: 30%;
  144 + background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
  145 + border-radius: 15px;
  146 + display: none;
  147 + justify-content: center;
  148 + align-items: center;
  149 + text-align: center;
  150 + z-index: 9999; /* 确保弹窗在最上层 */
  151 + color: white;
  152 + font-size: 24px;
  153 + font-weight: bold;
  154 + padding: 20px;
  155 + flex-direction: column; /* 让文字上下排列 */
  156 + backdrop-filter: blur(5px); /* 添加背景模糊效果 */
  157 + }
  158 +
  159 + .popup h2 {
  160 + margin-bottom: 10px;
  161 + font-size: 32px;
  162 + }
  163 +
  164 + .popup p {
  165 + font-size: 20px;
  166 + }
  167 +
  168 + /* 美化弹窗内容 */
  169 + .popup .upload-icon {
  170 + font-size: 60px;
  171 + margin-bottom: 20px;
  172 + color: #4caf50;
  173 + }
  174 + </style>
  175 +</head>
  176 +<body>
  177 +
  178 + <!-- 全局模糊层 -->
  179 + <div id="global-blur"></div>
  180 +
  181 + <div class="container" id="container">
  182 + <h1 style="font-size: 28px;">文件上传</h1>
  183 + <p style="font-size: 18px;">请选择一个 CSV 文件上传，我们将为您分析数据</p>
  184 +
  185 + <!-- 文件上传区域 -->
  186 + <form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
  187 + <div class="upload-box" id="upload-box">
  188 + <label>点击这里或拖拽文件上传</label>
  189 + <input id="file-upload" type="file" name="file" accept=".csv" required>
  190 + </div>
  191 +
  192 + <!-- 文件展示区域 -->
  193 + <div id="file-display" class="file-display">
  194 + <img src="https://img.icons8.com/color/48/000000/csv.png" alt="CSV">
  195 + <span id="file-name">文件名</span>
  196 + <span class="file-size" id="file-size">大小</span>
  197 + <button type="button" class="remove-btn" id="remove-btn">×</button>
  198 + </div>
  199 +
  200 + <button type="submit" class="submit-button">Start now</button>
  201 + </form>
  202 + </div>
  203 +
  204 + <!-- 弹窗 -->
  205 + <div class="popup" id="popup">
  206 + <h2>文件拖拽到此处即可上传</h2>
  207 + <p>支持的文件格式：CSV</p>
  208 + </div>
  209 +
  210 + <script>
  211 + const fileInput = document.getElementById('file-upload');
  212 + const fileDisplay = document.getElementById('file-display');
  213 + const fileNameDisplay = document.getElementById('file-name');
  214 + const fileSizeDisplay = document.getElementById('file-size');
  215 + const removeBtn = document.getElementById('remove-btn');
  216 + const uploadBox = document.getElementById('upload-box');
  217 + const popup = document.getElementById('popup');
  218 + const globalBlur = document.getElementById('global-blur');
  219 + const container = document.getElementById('container');
  220 +
  221 + // 点击上传区域时，触发文件选择框
  222 + uploadBox.addEventListener('click', function() {
  223 + fileInput.click();
  224 + });
  225 +
  226 + // 监听文件选择事件
  227 + fileInput.addEventListener('change', function () {
  228 + const file = fileInput.files[0];
  229 + if (file) {
  230 + if (file.name.endsWith('.csv')) {
  231 + fileNameDisplay.textContent = file.name;
  232 + fileSizeDisplay.textContent = `, ${Math.round(file.size / 1024)} KB`;
  233 + fileDisplay.style.display = 'block';
  234 + } else {
  235 + alert('只允许上传 CSV 文件');
  236 + fileInput.value = ''; // 清除文件
  237 + }
  238 + // 隐藏模糊层和弹窗
  239 + globalBlur.style.display = 'none';
  240 + popup.style.display = 'none';
  241 + container.classList.remove('blurred'); // 移除模糊效果
  242 + }
  243 + });
  244 +
  245 + // 删除按钮逻辑
  246 + removeBtn.addEventListener('click', function () {
  247 + fileDisplay.style.display = 'none';
  248 + fileInput.value = '';
  249 + // 隐藏模糊层和弹窗
  250 + globalBlur.style.display = 'none';
  251 + popup.style.display = 'none';
  252 + container.classList.remove('blurred'); // 移除模糊效果
  253 + });
  254 +
  255 + // 监听整个页面的拖拽进入事件，显示弹窗和模糊层
  256 + document.addEventListener('dragenter', function (e) {
  257 + e.preventDefault();
  258 + globalBlur.style.display = 'block'; // 显示全局模糊层
  259 + popup.style.display = 'flex'; // 显示弹出框
  260 + container.classList.add('blurred'); // 对 container 添加模糊效果
  261 + });
  262 +
  263 + // 监听拖拽离开弹窗区域，隐藏弹窗和模糊层
  264 + document.addEventListener('dragleave', function (e) {
  265 + e.preventDefault();
  266 + // 如果鼠标离开整个窗口，则隐藏模糊层和弹窗
  267 + if (e.clientX <= 0 || e.clientY <= 0 || e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
  268 + globalBlur.style.display = 'none';
  269 + popup.style.display = 'none';
  270 + container.classList.remove('blurred');
  271 + }
  272 + });
  273 +
  274 + // 在弹窗上允许拖拽
  275 + popup.addEventListener('dragover', function (e) {
  276 + e.preventDefault();
  277 + });
  278 +
  279 + // 在弹窗上接收文件
  280 + popup.addEventListener('drop', function (e) {
  281 + e.preventDefault();
  282 + globalBlur.style.display = 'none';
  283 + popup.style.display = 'none';
  284 + container.classList.remove('blurred');
  285 +
  286 + const file = e.dataTransfer.files[0];
  287 + if (file && file.name.endsWith('.csv')) {
  288 + fileInput.files = e.dataTransfer.files;
  289 + const event = new Event('change');
  290 + fileInput.dispatchEvent(event);
  291 + } else {
  292 + alert('只允许上传 CSV 文件');
  293 + }
  294 + });
  295 +
  296 + // 在页面其他地方的 drop 事件，隐藏模糊层和弹窗
  297 + document.addEventListener('drop', function (e) {
  298 + e.preventDefault();
  299 + globalBlur.style.display = 'none';
  300 + popup.style.display = 'none';
  301 + container.classList.remove('blurred');
  302 + // 不处理文件上传
  303 + });
  304 +
  305 + // 防止在页面其他位置的拖拽行为
  306 + document.addEventListener('dragover', function (e) {
  307 + e.preventDefault();
  308 + });
  309 + </script>
  310 +</body>
  311 +</html>