124 lines
5.1 KiB
HTML
124 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>上传文件到 MinIO/S3</title>
|
||
<style>
|
||
body { font-family: system-ui, sans-serif; background: #f7f9fb; margin: 0; }
|
||
.main-flex { display: flex; justify-content: center; align-items: flex-start; gap: 36px; min-height: 90vh;}
|
||
.uploader-main { flex: none; width: 410px; margin: 60px 0 0; background: #fff; border-radius: 13px; box-shadow: 0 6px 26px #ccc4; padding: 32px 38px 28px; }
|
||
.uploader-main h2 { text-align: center; font-size: 1.28rem; color: #1a2557; margin-bottom: 22px; }
|
||
.input-row {
|
||
margin-bottom: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.input-row label {
|
||
font-size: 15px;
|
||
color: #444;
|
||
width: 110px;
|
||
flex-shrink: 0;
|
||
}
|
||
.input-row input,
|
||
.input-row select {
|
||
flex: 1;
|
||
padding: 6px 10px;
|
||
border-radius: 6px;
|
||
border: 1px solid #b8c7df;
|
||
font-size: 15px;
|
||
box-sizing: border-box;
|
||
}
|
||
#drop-area {
|
||
width: 100%; min-height: 120px; border: 2px dashed #b7c7de; border-radius: 9px;
|
||
background: #f5f7fa; text-align: center; line-height: 120px; font-size: 15px; color: #98a8c7; margin-bottom: 16px; cursor: pointer; transition: border-color .18s;
|
||
}
|
||
#drop-area.dragover { border-color: #3b82f6; background: #f0f6ff; color: #234fa2; }
|
||
#uploadList { font-size: 13px; color: #888; margin-top: 7px; text-align: left;}
|
||
.desc { color: #99a; font-size: 13px; margin-bottom: 7px; }
|
||
#fileElem { display: none; }
|
||
.success { color: #2d974b; }
|
||
.error { color: #e64e4e; }
|
||
.tip { font-size:12px;color:#998; }
|
||
.progress-item { font-size: 14px; margin-bottom: 10px; color: #444; }
|
||
.file-label { display: inline-block; width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
|
||
.percent-label { font-size: 12px; color: #888; }
|
||
.upload-msg { margin-left: 8px; }
|
||
/* 右侧json面板 */
|
||
.result-panel { flex: none; width: 380px; margin: 60px 0 0; background: #fff; border-radius: 13px; box-shadow: 0 6px 26px #ccc4; padding: 28px 25px 22px;}
|
||
.result-panel h3 { font-size: 1rem; margin-bottom: 9px; color: #1a2557;}
|
||
.json-box {
|
||
word-break: break-word;
|
||
white-space: pre-wrap;
|
||
overflow-x: auto;
|
||
background: #f8fbfd;
|
||
border-radius: 10px;
|
||
padding: 18px 20px 16px 20px;
|
||
margin-top: 8px;
|
||
font-family: "JetBrains Mono", "Consolas", "monospace";
|
||
font-size: 15px;
|
||
color: #26496e;
|
||
min-height: 80px;
|
||
max-height: 240px;
|
||
box-shadow: 0 2px 10px #e3e9f2;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="main-flex">
|
||
<div class="uploader-main">
|
||
<h2>上传文件到 MinIO/S3</h2>
|
||
<div class="desc">可拖拽或点击选择，支持多文件上传</div>
|
||
|
||
<div class="input-row">
|
||
<label for="bucketName">Bucket 名称：</label>
|
||
<select id="bucketName">
|
||
<option value="kbase">kbase（公开）</option>
|
||
<option value="kbase-priv">kbase-priv（私有）</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="bucketTip" class="tip" style="margin-bottom:8px; color:red"></div>
|
||
|
||
<!-- 目标文件夹选择 -->
|
||
<div class="input-row">
|
||
<label for="folderSelect">目标路径：</label>
|
||
<select id="folderSelect">
|
||
<option value="" disabled selected>请选择</option>
|
||
<option id="defaultFolderOption" value="">yyyy/yyyyMMdd</option>
|
||
<option value="custom">自定义</option>
|
||
</select>
|
||
</div>
|
||
<div class="input-row" id="customFolderRow" style="display: none;">
|
||
<label for="folderName">自定义路径：</label>
|
||
<input type="text" id="folderName" placeholder="请输入自定义路径" />
|
||
</div>
|
||
|
||
<!-- 是否可检索 -->
|
||
<div class="input-row">
|
||
<label for="searchableSelect">是否可检索：</label>
|
||
<select id="searchableSelect">
|
||
<option value="true" selected>允许检索</option>
|
||
<option value="false">禁止检索</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="tip" style="margin-bottom:12px;">* 如 bucket 不存在请先在 MinIO 控制台创建</div>
|
||
|
||
<div id="drop-area">
|
||
<div id="drop-msg">拖拽文件到此上传，或点击选择文件</div>
|
||
<input type="file" id="fileElem" multiple />
|
||
</div>
|
||
<div id="uploadList"></div>
|
||
</div>
|
||
|
||
<div class="result-panel">
|
||
<h3>上传结果 JSON
|
||
<a href="upload-history.html" target="_blank" style="font-size: 13px; color: #2563eb; text-decoration: none; padding: 10px">查看历史上传记录 ↗</a>
|
||
</h3>
|
||
<pre id="jsonResult" class="json-box"></pre>
|
||
</div>
|
||
</div>
|
||
<script src="../scripts/uploader.js"></script>
|
||
</body>
|
||
</html>
|