163 lines
8.0 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文件上传</title>
<!-- Tailwind CDN可保留也可改为自己构建的CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 自定义样式 -->
<link rel="stylesheet" href="css/upload.css" />
<!-- AxiosCDN 版本;也可改回你本地的 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>
<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>
</div>
<!-- 加载遮罩层 -->
<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>
</div>
</div>
</div>
</body>
</html>