如何使用JavaScript实现HTML多文件上传前的大小校验（≤2MB）

核心实现逻辑 #

• 监听文件选择控件的change事件
• 遍历所有选中文件累加计算总大小
• 和2MB阈值（2 * 1024 * 1024 = 2097152 字节）做对比，超出则抛出提示并重置文件选择控件

完整代码示例 #

HTML部分（你已有的控件代码） #

<input type="file" id="file" multiple>

JavaScript部分 #

// 获取文件上传控件实例
const fileInput = document.getElementById('file');
// 定义总大小阈值：2MB 换算为字节
const MAX_TOTAL_SIZE = 2 * 1024 * 1024;

// 监听文件选择事件
fileInput.addEventListener('change', function(e) {
  const files = e.target.files;
  let totalSize = 0;
  
  // 累加所有文件大小
  for (let i = 0; i < files.length; i++) {
    totalSize += files[i].size;
    // 累加过程中超过阈值直接跳出循环，减少不必要计算
    if (totalSize > MAX_TOTAL_SIZE) {
      break;
    }
  }

  // 校验判断
  if (totalSize > MAX_TOTAL_SIZE) {
    alert('所有上传文件总大小不能超过2MB，请重新选择');
    // 重置文件选择控件，清空已选文件
    fileInput.value = '';
    return false;
  }

  // 校验通过后可执行后续上传逻辑
  // 例如调用上传接口、预览文件等
  console.log('文件校验通过，总大小：' + (totalSize / 1024 / 1024).toFixed(2) + 'MB');
});

注意事项 #

• 前端校验仅用于优化用户体验，后端接口必须额外再做文件大小校验，避免前端校验被恶意绕过
• 如果需要适配旧版IE浏览器，需额外处理File API的兼容性问题

内容的提问来源于stack exchange，提问作者mr Ahmed