如何获取HTML文件上传大小-html教程-PHP中文网

file.size 是唯一可靠、标准的获取文件大小的方式，单位为字节，不依赖路径、不读取磁盘、不触发网络请求；input.value 仅返回伪路径，无法推算大小；需在 change 事件中校验 files[0] 和 size 值，并清空 value 以支持重复选择；accept 属性不影响 size 检查，后端限制仍需同步配置。

如何获取html文件上传大小

file.size 是唯一可靠、标准的获取方式，单位为字节。它不依赖路径、不读取磁盘、不触发网络请求，只要用户选中了文件，就能立刻拿到准确值。

为什么不能用 input.value 或 filePath 推算大小

浏览器出于安全限制，input.value 只返回伪路径（如 C:\fakepath\photo.jpg），真实文件系统路径不可见；任何基于文件名或后缀“猜”大小的做法都无效。试图用 XMLHttpRequest 或 fetch 去请求本地文件路径会直接失败——那不是服务器资源，无法被 HTTP 访问。

如何在 change 事件里安全读取 size

必须绑定在 input[type="file"] 的 change 事件上，且要处理边界情况：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

检查 e.target.files.length > 0，否则 files[0] 会是 undefined
检查 file.size 是否存在且大于 0，某些 iOS WebView 或旧 Safari 可能返回 0（尤其大文件）
清空 e.target.value = ''，否则重复选同一个超限文件不会再次触发 change
别用 console.log 替代用户提示——没人盯着控制台

示例代码片段：

document.getElementById('upload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file || !file.size) return;
  const maxSize = 5 * 1024 * 1024; // 5MB
  if (file.size > maxSize) {
    alert(`文件不能超过 5MB，当前 ${(file.size / 1024 / 1024).toFixed(2)}MB`);
    e.target.value = ''; // 关键：清空输入框
  }
});

size 和 accept 属性完全无关

accept 只影响文件选择对话框的过滤行为（比如只显示 .pdf），对 file.size 没有任何约束力。你加了 accept="image/*"，用户仍可按住 Shift 键绕过筛选选中一个 2GB 的视频——此时 file.size 照样能读到，也必须靠它来拦截。

真正容易被忽略的是：前端拿到的 file.size 虽然快且直观，但它只是第一道体验防线；Nginx 的 client_max_body_size、PHP 的 upload_max_filesize、Node.js 中 multer 的 limits.fileSize，这些后端/中间件层的限制一旦没对齐，用户就会卡在 pending 状态或收到 413，而前端根本收不到错误回调。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！