FileList是HTML5中只读类数组对象，需转为数组后才能使用map/filter等方法；可遍历获取文件信息、按类型/大小筛选、用FileReader读取内容，并限制文件数量。
如果您在HTML5中需要处理用户通过文件输入控件选择的多个文件，则必须正确访问和操作FileList对象。FileList是一个只读类数组对象，由触发生成，无法直接修改其内容，但可通过JavaScript读取、过滤、转换为数组或与FileReader配合使用。以下是多种操作FileList的具体方法：
一、将FileList转换为标准数组
FileList本身不支持数组方法（如map、filter、forEach），需先转为真数组才能调用这些方法。
1、使用Array.from()创建新数组：
const fileArray = Array.from(fileInput.files);
2、使用扩展运算符转换：
const fileArray = [...fileInput.files];
立即学习“前端免费学习笔记（深入）”；
3、使用Array.prototype.slice.call()（兼容旧版浏览器）：
const fileArray = Array.prototype.slice.call(fileInput.files);
二、遍历并读取FileList中的每个文件信息
可通过for循环或数组方法访问每个File对象的name、size、type、lastModified等属性，用于展示或校验。
1、使用传统for循环获取文件名与大小：
for (let i = 0; i const file = fileInput.files[i];
console.log(文件名：${file.name}，大小：${file.size} 字节);
}
2、使用forEach遍历（需先转为数组）：
[...fileInput.files].forEach((file, index) => {
console.log(第 ${index + 1} 个文件：${file.name});
});
三、按类型或大小筛选FileList中的文件
筛选操作需基于转换后的数组进行，可结合filter方法实现条件过滤，例如排除非图片文件或超限文件。
1、筛选所有图片文件（MIME类型以image/开头）：
const imageFiles = [...fileInput.files].filter(file => file.type.startsWith('image/'));
2、筛选大于2MB的文件：
const largeFiles = [...fileInput.files].filter(file => file.size > 2 * 1024 * 1024);
3、筛选文件名后缀为.jpg或.png的文件：
const validFiles = [...fileInput.files].filter(file => /\.(jpg|jpeg|png)$/i.test(file.name));
四、使用FileReader逐个读取FileList中的文件内容
FileReader用于异步读取文件内容（文本、DataURL、ArrayBuffer），适用于预览图片、解析文本或上传前校验。
1、为每个文件创建独立FileReader实例：
[...fileInput.files].forEach(file => {
const reader = new FileReader();
reader.onload = () => {
console.log(文件 ${file.name} 已读取，内容长度：${reader.result.length});
};
reader.readAsText(file);
});
2、读取图片为base64并显示在img标签中：
const reader = new FileReader();
reader.onload = e => {
document.getElementById('preview').src = e.target.result;
};
reader.readAsDataURL(fileInput.files[0]);
五、限制FileList中文件数量并提示用户
FileList.length反映用户实际选择的文件数，可用于实施前端数量限制，避免后端拒绝过多文件。
1、检查是否超过5个文件：
if (fileInput.files.length > 5) {
alert(最多只能选择5个文件，请重新选择);
fileInput.value = ''; // 清空input值以重置FileList
}
2、动态禁用文件输入框（当已达上限）：
if (fileInput.files.length >= 5) {
fileInput.disabled = true;
console.warn(文件数量已达上限，输入框已禁用);
}
