262 lines
15 KiB
HTML
262 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>文件传输服务</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📤</text></svg>">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="logo">
|
||
<span class="icon">📤</span>
|
||
<h1>文件传输服务</h1>
|
||
</div>
|
||
<p class="subtitle">快速分享文件和文本，15分钟自动过期</p>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- 选项卡导航 -->
|
||
<div class="tab-nav">
|
||
<button class="tab-btn active" data-tab="upload">📁 上传文件</button>
|
||
<button class="tab-btn" data-tab="text">📝 分享文本</button>
|
||
<button class="tab-btn" data-tab="download">⬇️ 下载文件</button>
|
||
<button class="tab-btn" data-tab="help">💻 curl命令</button>
|
||
</div>
|
||
|
||
<!-- 文件上传 -->
|
||
<div class="tab-content active" id="upload-tab">
|
||
<div class="upload-section">
|
||
<div class="drop-zone" id="dropZone">
|
||
<div class="drop-content">
|
||
<div class="drop-icon">📁</div>
|
||
<p class="drop-text">拖拽文件到此处或点击选择</p>
|
||
<p class="drop-hint">最大支持 100MB</p>
|
||
<input type="file" id="fileInput" hidden>
|
||
<button class="select-btn">选择文件</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-section" id="progressSection" style="display: none;">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
<p class="progress-text" id="progressText">上传中...</p>
|
||
</div>
|
||
|
||
<div class="result-section" id="uploadResult" style="display: none;">
|
||
<div class="result-card">
|
||
<div class="result-header">
|
||
<span class="success-icon">✅</span>
|
||
<h3>上传成功!</h3>
|
||
</div>
|
||
<div class="share-info">
|
||
<div class="share-code">
|
||
<label>分享码:</label>
|
||
<div class="code-display">
|
||
<span class="code-text" id="uploadCode">ABCD1234</span>
|
||
<button class="copy-btn" onclick="copyCode('uploadCode')">📋</button>
|
||
</div>
|
||
</div>
|
||
<div class="share-link">
|
||
<label>下载链接:</label>
|
||
<div class="link-display">
|
||
<span class="link-text" id="uploadLink">http://localhost:8000/api/download/ABCD1234</span>
|
||
<button class="copy-btn" onclick="copyCode('uploadLink')">📋</button>
|
||
</div>
|
||
</div>
|
||
<div class="expire-info">
|
||
<span class="expire-text" id="uploadExpire">15分钟后过期</span>
|
||
</div>
|
||
</div>
|
||
<button class="new-upload-btn" onclick="resetUpload()">上传新文件</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文本分享 -->
|
||
<div class="tab-content" id="text-tab">
|
||
<div class="text-section">
|
||
<div class="text-input-area">
|
||
<textarea id="textContent" placeholder="在此输入要分享的文本内容..." rows="8"></textarea>
|
||
<div class="text-controls">
|
||
<input type="text" id="textFilename" placeholder="文件名 (可选)" value="shared_text.txt">
|
||
<button class="share-text-btn" id="shareTextBtn">📝 分享文本</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="result-section" id="textResult" style="display: none;">
|
||
<div class="result-card">
|
||
<div class="result-header">
|
||
<span class="success-icon">✅</span>
|
||
<h3>分享成功!</h3>
|
||
</div>
|
||
<div class="share-info">
|
||
<div class="share-code">
|
||
<label>分享码:</label>
|
||
<div class="code-display">
|
||
<span class="code-text" id="textCode">ABCD1234</span>
|
||
<button class="copy-btn" onclick="copyCode('textCode')">📋</button>
|
||
</div>
|
||
</div>
|
||
<div class="share-link">
|
||
<label>下载链接:</label>
|
||
<div class="link-display">
|
||
<span class="link-text" id="textLink">http://localhost:8000/api/download/ABCD1234</span>
|
||
<button class="copy-btn" onclick="copyCode('textLink')">📋</button>
|
||
</div>
|
||
</div>
|
||
<div class="expire-info">
|
||
<span class="expire-text" id="textExpire">15分钟后过期</span>
|
||
</div>
|
||
</div>
|
||
<button class="new-text-btn" onclick="resetText()">分享新文本</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文件下载 -->
|
||
<div class="tab-content" id="download-tab">
|
||
<div class="download-section">
|
||
<div class="download-input">
|
||
<h3>输入分享码下载文件</h3>
|
||
<div class="code-input-group">
|
||
<input type="text" id="downloadCode" placeholder="请输入8位分享码" maxlength="8">
|
||
<button class="download-btn" id="downloadBtn">📥 下载</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="file-info" id="fileInfo" style="display: none;">
|
||
<div class="info-card">
|
||
<div class="file-icon">📄</div>
|
||
<div class="file-details">
|
||
<h4 id="fileName">文件名.txt</h4>
|
||
<div class="file-meta">
|
||
<span id="fileSize">1.2 MB</span>
|
||
<span id="fileType">text/plain</span>
|
||
</div>
|
||
<div class="file-expire">
|
||
<span id="fileExpire">剩余时间: 12分钟</span>
|
||
</div>
|
||
</div>
|
||
<button class="download-file-btn" id="downloadFileBtn">⬇️ 下载文件</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- curl命令教程 -->
|
||
<div class="tab-content" id="help-tab">
|
||
<div class="help-section">
|
||
<h3>💻 curl命令使用教程</h3>
|
||
<p style="margin-bottom: 2rem; padding: 1rem; background: #e0f2fe; border-left: 4px solid #0284c7; border-radius: 4px;">
|
||
🎉 <strong>无需安装任何工具！</strong> 使用系统自带的curl命令即可操作文件传输服务。
|
||
<a href="/curl" target="_blank" style="color: #0284c7; font-weight: bold; text-decoration: none; margin-left: 1rem;">📖 查看完整教程</a>
|
||
</p>
|
||
|
||
<div class="help-group">
|
||
<h4>📤 上传文件</h4>
|
||
<div class="code-block">
|
||
<code>curl -X POST -F "file=@文件路径" http://localhost:8000/api/upload</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl -X POST -F \"file=@文件路径\" http://localhost:8000/api/upload')">📋</button>
|
||
</div>
|
||
<p class="help-desc">支持任意类型文件，最大100MB</p>
|
||
</div>
|
||
|
||
<div class="help-group">
|
||
<h4>📝 分享文本 ⭐</h4>
|
||
<div class="code-blocks">
|
||
<div class="code-block">
|
||
<span class="code-label">✨ 超级简单:</span>
|
||
<code>curl -X POST --data "Hello World!" http://localhost:8000/api/text</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl -X POST --data \"Hello World!\" http://localhost:8000/api/text')">📋</button>
|
||
</div>
|
||
<div class="code-block">
|
||
<span class="code-label">表单方式:</span>
|
||
<code>curl -X POST -F "content=Hello World!" -F "filename=hello.txt" http://localhost:8000/api/share-text-form</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl -X POST -F \"content=Hello World!\" -F \"filename=hello.txt\" http://localhost:8000/api/share-text-form')">📋</button>
|
||
</div>
|
||
<div class="code-block">
|
||
<span class="code-label">JSON方式:</span>
|
||
<code>curl -X POST -H "Content-Type: application/json" -d '{"content":"Hello World!"}' http://localhost:8000/api/share-text</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl -X POST -H \"Content-Type: application/json\" -d \'{\"content\":\"Hello World!\"}\' http://localhost:8000/api/share-text')">📋</button>
|
||
</div>
|
||
</div>
|
||
<p class="help-desc">✨ 推荐使用超级简单方式，只需要一个--data参数</p>
|
||
</div>
|
||
|
||
<div class="help-group">
|
||
<h4>⬇️ 下载文件</h4>
|
||
<div class="code-block">
|
||
<code>curl -O -J http://localhost:8000/api/download/分享码</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl -O -J http://localhost:8000/api/download/分享码')">📋</button>
|
||
</div>
|
||
<p class="help-desc">使用8位分享码下载文件，-O -J参数保持原文件名</p>
|
||
</div>
|
||
|
||
<div class="help-group">
|
||
<h4>ℹ️ 查看文件信息</h4>
|
||
<div class="code-block">
|
||
<code>curl http://localhost:8000/api/info/分享码</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl http://localhost:8000/api/info/分享码')">📋</button>
|
||
</div>
|
||
<p class="help-desc">查看文件名、大小、类型和过期时间</p>
|
||
</div>
|
||
|
||
<div class="help-group">
|
||
<h4>📊 列出所有分享</h4>
|
||
<div class="code-block">
|
||
<code>curl http://localhost:8000/api/shares</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl http://localhost:8000/api/shares')">📋</button>
|
||
</div>
|
||
<p class="help-desc">查看当前所有有效的分享</p>
|
||
</div>
|
||
|
||
<div class="help-group">
|
||
<h4>🎯 实用示例</h4>
|
||
<div class="code-blocks">
|
||
<div class="code-block">
|
||
<span class="code-label">上传图片:</span>
|
||
<code>curl -X POST -F "file=@photo.jpg" http://localhost:8000/api/upload</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl -X POST -F \"file=@photo.jpg\" http://localhost:8000/api/upload')">📋</button>
|
||
</div>
|
||
<div class="code-block">
|
||
<span class="code-label">分享代码:</span>
|
||
<code>curl -X POST --data "#!/bin/bash
|
||
echo Hello" http://localhost:8000/api/text</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl -X POST --data \"#!/bin/bash\necho Hello\" http://localhost:8000/api/text')">📋</button>
|
||
</div>
|
||
<div class="code-block">
|
||
<span class="code-label">显示进度:</span>
|
||
<code>curl --progress-bar -X POST -F "file=@largefile.zip" http://localhost:8000/api/upload</code>
|
||
<button class="copy-code-btn" onclick="copyText('curl --progress-bar -X POST -F \"file=@largefile.zip\" http://localhost:8000/api/upload')">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="footer-content">
|
||
<p>© 2024 文件传输服务 | 开源项目</p>
|
||
<div class="footer-links">
|
||
<a href="/docs" target="_blank">📖 API文档</a>
|
||
<a href="https://github.com" target="_blank">⭐ GitHub</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 通知提示 -->
|
||
<div class="toast" id="toast" style="display: none;">
|
||
<span class="toast-message" id="toastMessage">操作成功！</span>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html> |