浏览器禁止前端直接获取磁盘容量，因安全限制；真实磁盘使用需后端调用系统命令（如df、Get-PSDrive）或原生应用（Electron等）提供数据，前端仅负责渲染进度条。
HTML里没法直接获取磁盘容量
浏览器出于安全限制，HTML 和 JavaScript 无法读取本地文件系统或设备存储信息——这不是写法问题，是浏览器故意不让你知道。所谓“HTML已用/总容量进度条”，实际得靠后端或原生环境提供数据，前端只负责渲染。
常见错误现象：Uncaught SecurityError 或静默失败；有人试图用 localStorage 容量模拟磁盘容量，但 localStorage 通常只有 5–10MB，和磁盘 GB 级完全不对等。
- Web 页面能访问的存储只有
localStorage、sessionStorage、IndexedDB、Cache API这几类，且都受同源策略和配额限制 - 想显示真实磁盘使用情况，必须由服务端（如 Node.js、Python Flask）调用系统命令（如
df -h、Get-PSDrive），再通过 API 返回给前端 - Electron / Tauri / WebView 类桌面应用除外，它们可调用原生模块（如
fs.statfs或os.diskUsage）
用 JavaScript 模拟“已用/总容量”进度条（仅限前端可控场景）
如果你只是想可视化某个可测量的前端存储使用率（比如 IndexedDB 占用、或用户上传文件累计大小），那可以手动统计并渲染进度条。关键不是“磁盘”，而是“你明确知道总量和当前值的那块空间”。
使用场景：文件上传队列管理、离线缓存用量提示、表单附件体积预警。
立即学习“前端免费学习笔记（深入）”；
- 计算
IndexedDB大小没有标准 API，需遍历所有 objectStore + key，用serialize或估算 blob 字节数（精度有限） - 更靠谱的做法是自己维护一个计数器：每次写入前累加预估大小，删除时减去，总量设为硬编码阈值（如
100 * 1024 * 1024表示 100MB） - 进度条 HTML 结构建议用语义化标签：
<progress value="32" max="100"></progress>，比 div + background 更简洁且支持无障碍
示例（维护上传体积计数器）：
let usedBytes = 0;
const MAX_BYTES = 50 * 1024 * 1024; // 50MB
<p>function addFile(file) {
usedBytes += file.size;
const percent = Math.min(100, Math.round((usedBytes / MAX_BYTES) * 100));
document.querySelector('progress').value = percent;
}后端返回磁盘数据时的兼容性注意点
即使后端能拿到 df 或 Get-PSDrive 输出，也要小心字段含义和单位差异。Linux 的 Available 不等于 Free（有 reserved blocks），Windows 的 FreeSpace 可能包含系统还原点占用。
- 统一转成字节（bytes）传给前端，避免前端再解析
"12G"、"2.3 TB"这类字符串 - 不要直接暴露
/dev/sda1这类路径名，前端不需要；用业务标识代替，比如"cache_disk"或"user_storage" - API 响应建议含
used_bytes、total_bytes、timestamp三项，前端据此算百分比，避免除零或 NaN
进度条样式和交互容易被忽略的细节
很多人只管画个条，但用户真正关心的是“还能不能传”“什么时候会满”。光有视觉反馈不够，得配合行为约束。
-
<progress></progress>默认无 CSS 样式，Chrome/Firefox 渲染逻辑不同，需用::-webkit-progress-bar和::progress-value分别控制（Safari 用::-webkit-progress-inner-element） - 当使用率超过 90%，建议在进度条旁加
<small>剩余约 <code>842MB，数值比百分比更直观 - 如果达到上限，除了禁用上传按钮，还要拦截
drop事件，否则拖拽大文件仍会触发readAsArrayBuffer导致内存暴涨
事情说清了就结束：浏览器不给你磁盘数据，不是你代码没写对；真要显示，就得接受“前端只负责画，后端或原生才负责算”这个分工。
