jQuery监听file上传控件追加文件时如何获取历史已选文件

原生<input type="file">控件默认每次触发文件选择时，会直接用本次选中的文件覆盖原有files集合，不会自动保留历史选择内容，这是拿不到之前选的文件的核心原因。

实现步骤 #

• 首先给上传控件加上multiple属性，支持多选文件：

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

• 在事件监听外部定义独立数组，持久化存储所有已选中的文件，避免每次触发change事件时历史数据被重置。
• 每次选择新文件时，把本次选中的文件追加到总存储数组，再通过DataTransfer构造新的FileList赋值回控件，保证控件的files属性和存储的总文件列表一致。

完整实现代码 #

// 事件监听外部定义，持久化存储所有已选文件
let allSelectedFiles = [];

$('#MyFileUpload').change(function (e) {
    // 本次新选中的文件转成数组
    const currentNewFiles = Array.from(e.target.files);
    // 新文件追加到总列表（如果需要去重，可在此处加文件名/大小/修改时间的对比逻辑）
    allSelectedFiles.push(...currentNewFiles);

    // 构造新的FileList赋值回上传控件
    const dataTransfer = new DataTransfer();
    allSelectedFiles.forEach(file => dataTransfer.items.add(file));
    this.files = dataTransfer.files;

    // 可获取所有历史+本次选中的文件及属性
    console.log('全部已选文件列表：', allSelectedFiles);
    // 遍历即可拿到每个文件的name、size、type、lastModified等属性
    alert(`累计选中${allSelectedFiles.length}个文件\n本次新增：${currentNewFiles.map(f => f.name).join('、')}`);
});

注意事项 #

• 不要用$("#MyFileUpload").val()获取文件，这个方法只会返回最后一次选中文件的伪路径字符串，拿不到完整文件对象，也读不到历史选择的内容，所有文件操作直接读维护的allSelectedFiles数组即可。
• 如果需要移除已选中的某一个文件，直接操作allSelectedFiles数组删除对应项，再重新通过DataTransfer构造FileList赋值回控件即可。
• DataTransfer是现代浏览器原生支持的接口，兼容Chrome、Firefox、Edge、Safari 14.1及以上版本，常规业务场景无需额外兼容处理。

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