juanboy
312 lines
10 KiB
HTML
312 lines
10 KiB
HTML
<!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>
|