多文件上传时如何限制单个文件大小？

程序猿雨妍提问于 2026-01-30 03:43:29 阅读 173

交互

在做项目时遇到个问题，用户上传多个文件时，怎么限制每个文件不能超过5MB？我试过给input加accept属性和multiple，但好像对文件大小没用。

我的代码是这样的：

然后用JS处理：


function handleFiles(e) {
  const files = e.target.files;
  // 这里该怎么判断每个文件的大小？
  // 直接用files[i].size好像可以，但不确定是否兼容所有浏览器
}

但用户如果选了超过大小的文件，怎么及时拦截？直接提交的话后端会报错，想在前端先拦截提示。有没有更好的实现方式？

我来解答赞 11 收藏

反馈

2 条解答

A. 慧红 Lv1

用 input 的 files 属性遍历判断每个文件的 size，超过限制就提示并阻止提交，兼容性没问题，主流浏览器都支持。

JS 这么写就行：

function handleFiles(e) {

  const files = e.target.files;

  for (let i = 0; i < files.length; i++) {

    if (files[i].size > 5 * 1024 * 1024) {

      alert(文件 ${files[i].name} 超过 5MB);

      e.target.value = ''; // 清空选择

      return false;

    }

  }

}

2026-02-04 17:02

爱书 Lv1

document.getElementById('fileInput').addEventListener('change', function(e) {

  const files = e.target.files;

  const maxSize = 5 * 1024 * 1024; // 5MB

  let isValid = true;



  for (let i = 0; i < files.length; i++) {

    if (files[i].size > maxSize) {

      alert(文件 ${files[i].name} 超过5MB，无法上传);

      isValid = false;

    }

  }



  if (!isValid) {

    // 清空文件选择，防止提交

    e.target.value = '';

  } else {

    // 继续你的逻辑

    console.log('所有文件都符合要求');

  }

});

files[i].size 是标准属性，现代浏览器都支持。如果用户选了超大的文件，直接弹框提示并清空选择就行。代码放这了，拷走就能用。记得测试一下兼容性，虽然基本没问题。

2026-01-31 09:04