已经代码管托预览

简约图床 · 介绍与用法

一、这是什么

一个单文件、零依赖的轻量图床页面：HTML + CSS + JS 全部写在一个 index.html 里，
无需构建、无需安装任何依赖，保存后用浏览器打开即用。界面为移动端优先设计，
桌面端会自动居中显示。
上传就能用，直接代码管托也行！

二、功能一览

• 上传：点击选择、支持多选追加、上传队列管理、实时进度条、一张一张顺序上传、
  失败自动可重试、重复文件自动忽略
• 队列：每条显示缩略图/类型图标、文件名、大小、状态（等待上传/上传中/已完成/
  上传失败）、进度条，可单条移除或一键清空
• 列表：按上传时间倒序，每页 20 条分页，缩略图加载失败自动回退为类型图标，
  一键复制直链
• 底部操作面板：点击条目弹出，展示大小、类型、上传时间，支持预览、下载、复制链接
• 预览：图片支持双指缩放（最高 50 倍）、拖动、双击切换 1 倍/2.5 倍，
  桌面端支持滚轮缩放；视频、音频内嵌播放
• 其他：Toast 提示、下拉手势关闭面板、点遮罩关闭、复制链接全平台兼容

三、使用方法

1. 上传图片

   • 点击虚线框选择图片，可多选；之后可再次点击追加。重复文件
     （文件名+大小+修改时间全同）自动忽略。
   • 点「开始上传」，队列顺序一张张上传，上传中按钮禁用防重复提交。
   • 每条队列可点「✕」移除（上传中的不行）；「清空队列」一次性清空（上传中不行）。
   • 失败会显示原因；再点一次「开始上传」会自动重试所有等待和失败的条目。
   • 前端不校验大小，单文件上限由后端控制，超限上传时由后端报错。

2. 管理文件

   • 「我的图片」倒序展示，底部分页，显示「共 N 张」。
   • 点条目上的「复制」直接复制直链；点条目主体弹出底部面板，
     可预览、下载、复制链接。
   • 关闭面板：点「取消」、点遮罩，或按住顶部把手下拉（约 90px 自动关闭）。

3. 复制链接
   优先用 navigator.clipboard（需 https/localhost 安全上下文）；
   http 等环境自动回退 execCommand 方案。

四、兼容性要求

• 支持 ES6、fetch、Promise 的现代浏览器：iOS Safari、Android Chrome、
  桌面 Chrome / Edge / Firefox 等。
• 移动端触摸手势（捏合缩放、下拉关闭）在触屏设备上生效；
  桌面端用滚轮缩放、点击操作。
• 视频/音频能否播放取决于浏览器自身支持的格式。

五、常见问题

• 上传失败/没反应：检查后端代理是否部署、地址和口令是否匹配；失败条目会留在队列，
  修复后再点「开始上传」即可重试。
• 大文件传不上：上限由后端控制，错误信息会显示在队列状态里。
• 缩略图变成彩色图标：是图片加载失败的自动回退，检查直链是否可访问。
• 传视频/音频：上传框限定 accept="image/*" 只能选图片，但预览/下载逻辑已按
  通用文件实现，后端放开限制即可用。