如何用jQuery实现多文件上传总大小不超3GB的验证

嘿，这个需求其实不难实现，核心就是实时跟踪已选文件的总大小，并在选文件、删文件、提交前这几个关键节点做校验。我帮你完善现有代码，一步步来：

首先在现有变量旁添加总大小跟踪变量，以及定义3GB的阈值（注意单位是字节）：

var fileCount = 0;
var totalFileSize = 0; // 跟踪已选文件总大小，单位字节
const MAX_TOTAL_SIZE = 3 * 1024 * 1024 * 1024; // 3GB对应的字节数（3221225472）

你的#uploadFile的change事件需要遍历每个选中的文件，累加大小的同时，还要提前校验是否超过阈值，避免添加超标的文件：

$('#uploadFile').on('change', function() {
  var files = this.files; // 获取所有选中的文件列表
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var filename = file.name;
    var fileSize = file.size;

    // 先判断：添加当前文件后总大小是否超标
    if (totalFileSize + fileSize > MAX_TOTAL_SIZE) {
      alert(`添加「${filename}」后总大小将超过3GB，无法添加该文件！`);
      continue; // 跳过这个文件，不添加
    }

    // 更新总大小和文件计数
    totalFileSize += fileSize;
    fileCount += 1;

    // 把文件信息渲染到页面（假设你有一个#file_list容器存放已选文件）
    var fileItem = `
      <span class="file-item">
        ${filename} (${formatFileSize(fileSize)})
        <button class="close">&times;</button>
      </span>
    `;
    $('#file_list').append(fileItem);
    // 将文件大小存入元素的data属性，方便删除时获取
    $('#file_list .file-item:last').data('size', fileSize);
  }
  showFileCount();
  showTotalSize(); // 新增显示总大小的方法
});

和showFileCount对应，用来实时展示已选文件的总大小，提升用户体验：

// 显示总大小
var showTotalSize = function() {
  $('#total_size').text(`总大小：${formatFileSize(totalFileSize)} / ${formatFileSize(MAX_TOTAL_SIZE)}`);
};

// 辅助工具函数：把字节数转换成易读的格式（如KB/MB/GB）
function formatFileSize(bytes) {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

原来的删除事件只更新了文件计数，现在要同时减去对应文件的大小，保证总大小统计准确：

$(document).on('click', '.close', function() {
  var fileItem = $(this).parents('.file-item');
  var removedSize = fileItem.data('size'); // 从data属性中获取要删除的文件大小

  // 更新总大小和计数
  totalFileSize -= removedSize;
  fileCount -= 1;

  // 移除页面上的文件元素
  fileItem.remove();

  // 更新显示
  showFileCount();
  showTotalSize();
});

前端校验只是为了提升体验，一定要在后端再做一次总大小校验（防止用户通过控制台修改前端变量绕过限制）。同时前端在提交时也要做最后一次校验：

$('form').on('submit', function(e) {
  if (totalFileSize > MAX_TOTAL_SIZE) {
    e.preventDefault(); // 阻止表单提交
    alert('已选文件总大小超过3GB，无法上传！');
  } else if (fileCount === 0) {
    e.preventDefault();
    alert('请至少选择一个文件再提交！');
  }
});

你需要在页面上添加对应的显示元素和文件容器：

<p id="file_count"></p>
<p id="total_size"></p>
<div id="file_list"></div>
<!-- 注意要加multiple属性，支持多文件选择 -->
<input type="file" id="uploadFile" multiple>

最后提醒一句：前端的限制只是给用户友好提示，后端必须重新校验所有上传文件的总大小，因为前端代码可以被篡改，不能完全信任前端的校验结果哦！

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