简约图床 —— 单文件零依赖轻量图床源码详解

一个纯前端单文件图床页面，HTML + CSS + JS 全部写在一个 index.html 里，无构建工具、零依赖，保存后用浏览器打开即用。移动端优先设计，桌面端自动居中适配。

一、项目概述

简约图床是一套极致轻量的图床前端页面源码。与市面上动辄依赖数据库、后端框架的图床系统不同，它把全部功能浓缩进一个 HTML 文件——没有 npm install、没有 Webpack、没有 Vue/React，下载后直接用浏览器打开就能跑。

核心定位：共享 100G 存储空间，单文件最大上传 20M，适合个人/小团队快速搭建轻量图床。

二、技术特点

三、功能模块详解

📤 上传系统

📋 队列管理

每条队列项展示：

• 🔹 缩略图（加载失败自动回退为类型图标）
• 🔹 文件名
• 🔹 文件大小
• 🔹 状态标识：等待上传 / 上传中 / 已完成 / 上传失败
• 🔹 实时进度条

操作：

• 单条移除（上传中的不可移除）
• 一键清空队列（上传中不可清空）

🗂️ 文件列表

• 按上传时间倒序排列
• 每页 20 条分页
• 显示「共 N 张」总数统计
• 缩略图加载失败自动回退为彩色类型图标
• 一键复制直链

🎛️ 底部操作面板

点击列表条目弹出底部面板，展示：

• 文件大小
• 文件类型
• 上传时间
• 操作按钮：预览 / 下载 / 复制链接

面板交互：

• 点「取消」关闭
• 点遮罩区域关闭
• 按住顶部把手向下拖拽约 90px 自动关闭（触屏手势）

🔍 预览功能

🔔 其他细节

• Toast 提示：操作反馈轻提示
• 下拉手势关闭面板：移动端触屏友好
• 点遮罩关闭：符合移动端操作习惯
• 复制链接全平台兼容：优先使用 navigator.clipboard（需 HTTPS/localhost 安全上下文），HTTP 环境自动回退 execCommand 方案

四、浏览器兼容性

技术要求：浏览器需支持 ES6、fetch、Promise。

注意：视频/音频播放能力取决于浏览器自身支持的编码格式。

五、使用指南

5.1 上传图片

1. 点击虚线框选择图片（支持多选）
2. 可再次点击追加更多图片
3. 重复文件（文件名+大小+修改时间全同）自动忽略
4. 点击「开始上传」，队列按顺序逐张上传
5. 上传失败条目留在队列，修复后端后再次点击「开始上传」即可重试

5.2 管理文件

• 「我的图片」区域倒序展示所有已上传文件
• 底部有分页导航
• 点击条目的「复制」按钮直接复制直链
• 点击条目主体弹出底部操作面板，可预览/下载/复制链接

5.3 关闭面板

• 点「取消」按钮
• 点遮罩背景
• 移动端按住顶部把手向下拖拽约 90px

六、常见问题

七、适用场景

• 个人轻量图床搭建
• 团队内部图片共享
• 嵌入现有系统作为图片上传模块
• 学习前端上传队列管理、手势交互实现
• 快速原型验证，无需复杂部署

八、项目亮点总结

• 🪶 极致轻量：单文件、零依赖、无数据库，HTML/CSS/JS 一把梭
• 📱 移动优先：触屏手势（捏合缩放、下拉关闭）、响应式布局
• 📤 队列管理：多选追加、去重、进度追踪、失败重试
• 🔍 强大预览：图片双指缩放（最高50倍）、拖拽、双击倍率切换、视频/音频内嵌播放
• 🔗 全平台复制兼容：HTTPS 走 Clipboard API，HTTP 降级 execCommand
• 🚫 防呆设计：上传中按钮禁用、重复文件过滤、失败重试机制
• 🎨 回退策略：缩略图加载失败自动回退类型图标

图片

下载链接：

https://pan.quark.cn/s/1f07c3bf6086