2025-07-29 10:03:49 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
2025-07-29 15:46:53 +08:00
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
2025-07-29 10:03:49 +08:00
|
|
|
|
<title>文件上传</title>
|
|
|
|
|
|
|
2025-07-29 15:46:53 +08:00
|
|
|
|
<!-- Tailwind CDN（可保留，也可改为自己构建的CSS） -->
|
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
2025-07-29 10:03:49 +08:00
|
|
|
|
|
2025-07-29 15:46:53 +08:00
|
|
|
|
<!-- 自定义样式 -->
|
|
|
|
|
|
<link rel="stylesheet" href="css/upload.css" />
|
2025-07-29 10:03:49 +08:00
|
|
|
|
|
2025-07-29 15:46:53 +08:00
|
|
|
|
<!-- Axios（CDN 版本；也可改回你本地的 js/axios.min.js） -->
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" defer></script>
|
|
|
|
|
|
<!-- 交互逻辑 -->
|
|
|
|
|
|
<script src="js/upload.js" defer></script>
|
|
|
|
|
|
</head>
|
2025-07-29 10:03:49 +08:00
|
|
|
|
|
2025-07-29 15:46:53 +08:00
|
|
|
|
<body class="min-h-screen min-h-[100dvh] bg-gradient-to-br from-gray-50 to-gray-100 grid place-items-center">
|
|
|
|
|
|
<div class="container mx-auto px-4 py-10">
|
|
|
|
|
|
<div class="mx-auto max-w-lg relative">
|
|
|
|
|
|
<!-- 卡片 -->
|
|
|
|
|
|
<div class="bg-white/90 backdrop-blur p-6 rounded-2xl shadow-xl ring-1 ring-gray-100">
|
|
|
|
|
|
<h2 class="text-2xl font-semibold text-center mb-2">添加知识</h2>
|
|
|
|
|
|
<p class="text-center text-gray-500 mb-6">支持拖拽或点击上传多个文件</p>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 表单 -->
|
|
|
|
|
|
<form id="uploadForm" enctype="multipart/form-data" class="space-y-5">
|
|
|
|
|
|
<!-- 标题 -->
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label for="title" class="block text-sm font-medium text-gray-700"
|
|
|
|
|
|
>知识库名称</label>
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="text"
|
|
|
|
|
|
id="title"
|
|
|
|
|
|
name="title"
|
|
|
|
|
|
class="mt-1 block w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
|
|
|
|
placeholder="输入知识库名称"
|
|
|
|
|
|
required
|
|
|
|
|
|
aria-describedby="titleHelp"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 拖拽/点击区域 -->
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="block text-sm font-medium text-gray-700">上传文件</label>
|
|
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="dropZone"
|
|
|
|
|
|
class="mt-2 drag-zone group border-2 border-dashed border-gray-300 rounded-xl p-6 text-center text-gray-500 transition-all"
|
|
|
|
|
|
role="button"
|
|
|
|
|
|
tabindex="0"
|
|
|
|
|
|
aria-label="将文件或文件夹拖拽到此处，或点击选择文件"
|
|
|
|
|
|
>
|
|
|
|
|
|
<!-- 隐藏但可访问的原生文件输入（选择文件） -->
|
|
|
|
|
|
<input
|
|
|
|
|
|
type="file"
|
|
|
|
|
|
id="fileInput"
|
|
|
|
|
|
class="sr-only"
|
|
|
|
|
|
accept=".pdf,.csv,.txt,.md,.sql,.java"
|
|
|
|
|
|
multiple
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center justify-center gap-2 pointer-events-none">
|
|
|
|
|
|
<svg
|
|
|
|
|
|
class="h-10 w-10 opacity-80"
|
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
|
fill="none"
|
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
|
>
|
|
|
|
|
|
<path
|
|
|
|
|
|
d="M12 16V4m0 0l-4 4m4-4l4 4M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"
|
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
<div class="text-base">
|
|
|
|
|
|
将<strong>文件或文件夹</strong>拖到此处 <span class="text-gray-400">或</span>
|
|
|
|
|
|
<span class="text-blue-600 underline decoration-dotted">点击选择文件</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="text-xs text-gray-400">
|
|
|
|
|
|
支持文件后缀：.pdf .csv .txt .md .sql .java（可多选）
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 选择文件夹按钮 + 隐藏目录输入 -->
|
|
|
|
|
|
<div class="mt-2 text-center">
|
|
|
|
|
|
<button type="button" id="chooseDirBtn" class="text-sm text-blue-600 hover:text-blue-700 underline">
|
|
|
|
|
|
或选择一个文件夹上传
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<!-- 选择目录（Chrome/Edge/Safari 支持；Firefox 暂不支持） -->
|
|
|
|
|
|
<input type="file" id="dirInput" class="sr-only" webkitdirectory directory multiple />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 文件列表 -->
|
|
|
|
|
|
<div id="fileList" class="hidden">
|
|
|
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
|
|
|
<span class="text-sm font-medium text-gray-700">待上传文件</span>
|
|
|
|
|
|
<button
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
id="clearAllBtn"
|
|
|
|
|
|
class="text-sm text-gray-500 hover:text-red-600"
|
|
|
|
|
|
>
|
|
|
|
|
|
清空
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ul class="list-none divide-y divide-gray-100 rounded-lg border border-gray-100" aria-live="polite"></ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 进度条 -->
|
|
|
|
|
|
<div id="progressWrap" class="hidden">
|
|
|
|
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1">
|
|
|
|
|
|
<span>上传进度</span><span id="progressText">0%</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
|
|
|
|
|
|
<div id="progressBar" class="h-full bg-blue-600 transition-all" style="width: 0%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 提交 -->
|
|
|
|
|
|
<div class="flex justify-center pt-2">
|
|
|
|
|
|
<button
|
|
|
|
|
|
type="submit"
|
|
|
|
|
|
class="bg-blue-600 text-white py-2 px-5 rounded-lg hover:bg-blue-700 active:scale-[0.99] disabled:opacity-60"
|
|
|
|
|
|
id="submitBtn"
|
|
|
|
|
|
>
|
|
|
|
|
|
提交
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
2025-07-29 10:03:49 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-07-29 15:46:53 +08:00
|
|
|
|
<!-- 加载遮罩层 -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="loadingOverlay"
|
|
|
|
|
|
class="hidden absolute inset-0 bg-white/80 backdrop-blur flex flex-col items-center justify-center rounded-2xl"
|
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="loader mb-3">
|
|
|
|
|
|
<svg class="h-8 w-8 text-blue-600" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
|
|
|
|
<path d="M12 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
|
|
<path d="M12 18V22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
|
|
<path d="M4.93 4.93L7.76 7.76" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
|
|
<path d="M16.24 16.24L19.07 19.07" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
|
|
<path d="M2 12H6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
|
|
<path d="M18 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
|
|
<path d="M4.93 19.07L7.76 16.24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
|
|
<path d="M16.24 7.76L19.07 4.93" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-gray-600 text-sm">文件上传中，请稍候...</p>
|
2025-07-29 10:03:49 +08:00
|
|
|
|
</div>
|
2025-07-29 15:46:53 +08:00
|
|
|
|
</div>
|
2025-07-29 10:03:49 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
