在Web开发中，让用户通过 <input type="file" multiple> 选择多个文件是一个再常见不过的需求。然而，鲜有开发者注意到一个细微却时常令人困惑的问题：浏览器默认的 FileList 对象并不保留用户点击选择的顺序，它通常按照文件在文件系统中的排序（如文件名或修改时间）来排列，而非用户实际点击的顺序。这一“特性”在需要按用户意图依次处理文件（如合并按顺序选择的图片、上传按点击次序排列的文档）时，常常导致结果与预期不符。
为何顺序会“乱掉”？
浏览器出于安全和效率考虑，对用户选择的文件列表进行了标准化处理。当用户通过文件对话框选择文件时，操作系统返回的文件列表往往按文件系统排序（例如Windows下按名称排序），浏览器直接将该列表暴露为 FileList 对象，不会记录用户点击的顺序。这意味着，即使你先点击了“照片3.jpg”，再点击“照片1.jpg”，最终得到的 FileList 中“照片1.jpg”可能排在前面。
这种默认行为在大多数场景下无伤大雅，但一旦涉及“按用户点击顺序处理”的业务逻辑——比如制作相册时用户希望按选择顺序排列照片、批量上传合同文件时需按点击先后生成编号——就会产生混乱。
破解之道：自定义顺序维护
保持点击顺序的核心思路是不让浏览器自动排序，而是由开发者自行记录用户的操作顺序。具体可通过以下两种主流方案实现：
方案一：利用 dataTransfer 与 files 属性同步
当用户通过拖拽或选择文件时，可以借助 DataTransfer 对象的 files 属性手动维护一个有序数组。但更直接的方案是监听 change 事件，将每次选择的文件追加到一个自定义数组中，同时利用 File 对象的 lastModified 或自定义索引来标记顺序。
示例代码（简化版）：
let selectedFiles = [];
inputElement.addEventListener('change', (event) => {
const newFiles = Array.from(event.target.files);
// 为每个文件添加一个顺序标记
newFiles.forEach((file, index) => {
file._clickOrder = selectedFiles.length + index + 1; // 自定义属性
selectedFiles.push(file);
});
// 按 _clickOrder 排序展示或上传
selectedFiles.sort((a, b) => a._clickOrder - b._clickOrder);
});
方案二：使用 webkitGetAsEntry 与文件选择会话
对于需要精确模拟用户点击顺序的复杂场景（如选择文件夹或混合选择），可以使用 webkitGetAsEntry 配合文件条目（FileEntry）进行处理，但该方案浏览器兼容性有限。更稳定的做法是分步选择：每次用户点击“选择文件”后将当前选择的文件追加到维护的数组中，并清空 <input> 的 value 以便下次选择时不被覆盖。
注意：直接清空 input.value = '' 会导致之前的 FileList 丢失，因此必须将文件先存入独立数组。
高阶技巧与兼容性考量
1. 避免重复选择问题
如果用户多次选择同一个文件，直接 push 会导致重复。可以在添加前检查文件名、大小和最后修改时间是否已存在。
2. 处理用户撤销选择
部分浏览器允许用户在文件对话框中取消部分选择，此时 change 事件返回的是最终确认的文件列表。开发者需要重新对比新旧列表来确定用户实际删除了哪些文件，这是一个复杂但可控的处理过程。
3. 移动端与 Safari 的特殊性
在 iOS Safari 上，multiple 属性的文件选择器一次只能选择一个文件（无法多选），顺序问题不存在。但在 Android Chrome 上，多选顺序仍与桌面端一致，上述方案通用。
4. 结合拖拽上传
如果界面同时支持拖拽上传，拖拽时文件顺序由用户拖拽的顺序决定（本身是乱的），但同样可以通过 dragenter、drop 事件中的 dataTransfer.files 获取并维护顺序。
实际应用案例
某在线文档编辑平台曾收到用户反馈：批量上传图片制作幻灯片时，选中的图片顺序总与点击顺序不一致，导致需要手动拖动调整。开发团队采用上述方案后，将用户选择顺序保存为元数据，上传时携带顺序索引，服务器端按该顺序存储，彻底解决了问题。
另一个案例是证件照批量处理工具：用户需要按点击顺序对应不同证件类型（如先选身份证正面，再选反面），若顺序错乱将导致严重业务错误。通过自定义顺序维护，实现了零差错。
小结
保持用户点击选择顺序，本质上是对用户意图的尊重。浏览器默认的 FileList 排序过于“自作主张”，而开发者只需通过少量代码记录点击时的数组索引，即可完美还原用户期望的顺序。在实际项目开发中，建议将顺序维护封装成通用函数，并做好兼容性测试，尤其是针对不同操作系统和浏览器版本的 FileList 表现差异。技术虽小，却往往能大幅提升用户体验，值得每一个前端开发者重视。