如何用jQuery实现多文件上传总大小显示及3GB容量限制

嘿，我来帮你搞定这个多文件上传的总大小限制问题！看你现有的代码已经有了文件计数和删除的初步框架，但还差几个关键部分需要完善，咱们一步步来：

核心思路 #

要实现总文件大小不超过3GB的限制，需要做到这几点：

• 初始化并维护「总大小」变量，实时累加/扣减
• 每次用户选择文件时，先校验加上新文件后的总大小是否超标
• 删除文件时，同步扣减对应文件的大小
• 前端校验后，一定要在后端再做一次校验（前端限制可以被绕过）

完整代码实现 #

<!-- 假设你的HTML结构参考如下 -->
<div>
  <input type="file" id="uploadFile" multiple>
  <div id="file_list"></div>
  <div id="file_count"></div>
</div>

// 初始化核心变量：文件数量、总大小（单位：字节）
var fileCount = 0;
var totalSize = 0;
// 定义3GB的字节数：1GB = 1024*1024*1024 字节
const MAX_TOTAL_SIZE = 3 * 1024 * 1024 * 1024; 

// 更新文件计数和总大小的显示
var showFileCount = function() {
  // 把字节转换成更友好的GB格式，保留两位小数
  const readableTotalSize = (totalSize / (1024*1024*1024)).toFixed(2) + ' GB';
  $('#file_count').text(`# Files selected: ${fileCount} | Total file size: ${readableTotalSize}`);
};
// 初始显示
showFileCount();

// 文件选择事件处理
$('#uploadFile').on('change', function(e) {
  const selectedFiles = e.target.files;
  let tempAddedSize = 0;
  const validFiles = [];

  // 先遍历本次选中的文件，计算临时总大小，筛选有效文件
  for (const file of selectedFiles) {
    tempAddedSize += file.size;
    validFiles.push(file);
  }

  // 校验总大小是否超过3GB限制
  if (totalSize + tempAddedSize > MAX_TOTAL_SIZE) {
    alert('抱歉，总文件大小不能超过3GB，请减少文件或选择更小的文件！');
    return; // 终止后续处理
  }

  // 校验通过，更新计数和总大小，并把文件添加到页面
  for (const file of validFiles) {
    fileCount++;
    totalSize += file.size;
    // 把文件信息添加到列表，同时用data-size存储文件大小（方便删除时扣减）
    $('#file_list').append(`
      <span class="file-item" data-size="${file.size}">
        ${file.name} (${(file.size / (1024*1024)).toFixed(2)} MB)
        <button class="close">&times;</button>
      </span>
    `);
  }

  // 更新显示
  showFileCount();
  // 重置input值，避免用户选择相同文件时change事件不触发
  this.value = '';
});

// 删除文件的事件处理
$(document).on('click', '.close', function() {
  const $fileItem = $(this).parents('.file-item');
  // 获取当前文件的大小，转成数字
  const fileSize = parseInt($fileItem.data('size'), 10);
  
  // 更新计数和总大小
  fileCount--;
  totalSize -= fileSize;
  
  // 删除页面上的文件元素
  $fileItem.remove();
  
  // 更新显示
  showFileCount();
});

重要注意事项 #

1. 后端必须再做校验：前端的限制很容易被开发者工具绕过，所以后端接收文件时一定要重新计算总大小，超过3GB就拒绝接收。
2. 单位转换的灵活性：如果需要更灵活的单位显示（比如自动切换MB/GB），可以写一个小工具函数来处理字节到可读单位的转换。
3. 用户体验优化：可以把alert换成更友好的页面提示，比如在#file_count旁边显示红色警告文字，而不是弹出框。

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