万朱浩 / 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
<!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>
... ...