如何从HTML input元素获取文件数据并解决客户端校验文件大小报错问题

你的代码中错误地读取了文件选择框的value属性，该属性返回的是字符串格式的本地文件路径，不存在files子属性，因此调用file.files[0]时会抛出Cannot read properties of undefined (reading '0')的异常。同时浏览器出于安全限制，JavaScript 无法仅通过本地文件路径读取文件的大小、类型等元信息，必须通过文件选择框元素的files属性才能获取到对应的文件对象。

JS 代码 #

const MAXSIZEMB = 100; // 可根据实际上传需求调整大小上限

function checkSize() {
  // 直接获取文件选择框DOM元素，而非它的value属性
  const fileInput = document.getElementById("file");
  const maxSize = MAXSIZEMB * 1024 * 1024;

  // 前置判断是否选择了文件，避免空值报错
  if (!fileInput.files || fileInput.files.length === 0) return;

  if (fileInput.files[0].size > maxSize) {
    alert(`文件大小不能超过 ${MAXSIZEMB} MB`);
    // 清空已选的超出大小的文件
    fileInput.value = "";
  }
}

HTML 代码 #

<input type="file" name="file" id="file" onchange="checkSize()" />

• 原代码中MAXSIZEMB初始值为100000，对应100GB的上传上限，不符合绝大多数业务场景，建议根据实际需求调整
• 如需支持多文件上传校验，可遍历fileInput.files数组逐一判断大小

内容的提问来源于stack exchange，提问作者André Rocha