Layui Upload组件多文件上传前获取文件数量的实现方法

概述

在使用Layui框架的Upload组件进行多文件上传时，开发者经常需要在文件选择完成后但尚未上传前获取已选文件的数量。这一需求在限制上传数量、显示上传进度等场景中尤为重要。

核心实现方法

Layui Upload组件提供了getChooseFiles()方法来获取当前已选择的文件列表。该方法返回一个数组，包含所有已选择的文件对象，通过获取数组长度即可得到文件数量。

基本用法示例

upload.render({
  elem: '#uploadBtn',
  url: '/upload/',
  multiple: true,
  choose: function(obj){
    // 获取已选择文件列表
    var files = obj.getChooseFiles();
    // 获取文件数量
    var fileCount = files.length;
    console.log('已选择文件数量:', fileCount);
    
    // 其他业务逻辑...
  }
});

实际应用场景

1. 限制上传数量

在文件选择后立即检查数量，避免超过服务器限制：

choose: function(obj){
  var files = obj.getChooseFiles();
  if(files.length > 10) {
    layer.msg('最多只能上传10个文件');
    return false; // 阻止继续操作
  }
}

2. 动态显示上传进度

在选择文件后更新UI，显示待上传文件数量：

choose: function(obj){
  var files = obj.getChooseFiles();
  $('#file-count').text(files.length);
}

注意事项

1. 版本兼容性：getChooseFiles()方法在较新版本的Layui中可用，建议使用2.9.x及以上版本

2. 文件对象属性：获取的文件对象包含以下有用属性：

   • name：文件名
   • size：文件大小(字节)
   • type：文件MIME类型

3. 与pushFile()的区别：pushFile()会将文件追加到队列，而getChooseFiles()只是获取当前选择，不会修改队列

高级技巧

对于需要更复杂控制的场景，可以结合使用before回调：

before: function(obj){
  var files = obj.getChooseFiles();
  // 可以在此进行最后的验证
  if(!validateFiles(files)) {
    return false; // 阻止上传
  }
}

通过掌握这些方法，开发者可以更灵活地控制Layui Upload组件的多文件上传流程，提升用户体验。