选中首个文件后触发第二个文件选择器的跨浏览器兼容方案问询

问题根因 #

浏览器出于安全限制，要求触发文件选择器的操作必须属于用户主动交互触发的短周期有效上下文：Chrome目前将file input的change事件纳入用户激活有效范围，但Firefox、Safari的策略更严格，仅将直接响应用户点击/触屏/按键的同步代码视为合法触发上下文，异步或后续触发的change事件不在允许范围内，所以会拦截你写的自动触发逻辑。

可行解决方案 #

方案1：改用多文件选择（最推荐，无兼容问题） #

如果两个文件不需要分开限制格式/大小，直接给单个input加上multiple属性即可，用户一次就能选中多个文件，完全不需要多步触发，也不存在兼容性问题：

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

读取文件时直接遍历event.target.files数组即可拿到所有选中的文件。

方案2：引导用户手动点击第二个选择器（全浏览器兼容） #

如果两个文件需要分开做格式、大小校验，不能合并为多文件选择，可以在第一个文件选中后，显示一个醒目的按钮让用户手动点击触发第二个选择器，这是所有浏览器都兼容的生产级方案，不会被安全策略拦截：

<input type="file" id="firstFile">
<button id="triggerSecond" style="display:none;margin-top:10px">点击选择第二个文件</button>
<input type="file" id="secondFile" style="display:none">

const firstFile = document.getElementById('firstFile')
const triggerSecond = document.getElementById('triggerSecond')
const secondFile = document.getElementById('secondFile')

firstFile.addEventListener('change', () => {
  // 第一个文件选中后显示触发按钮
  triggerSecond.style.display = 'inline-block'
})

triggerSecond.addEventListener('click', () => {
  // 直接响应用户点击，所有浏览器都允许触发文件选择器
  secondFile.click()
})

secondFile.addEventListener('change', () => {
  // 第二个文件选中后的业务逻辑，这里可自行补充
  triggerSecond.style.display = 'none'
})

方案3：用户激活有效期API（兼容性有限，仅做参考） #

高版本浏览器支持navigator.userActivation相关API，可以临时持有用户激活状态，不过目前仅在部分浏览器版本生效，不适合全量业务场景使用：

document.getElementById("firstFile").addEventListener('change', (event) => {
  if (navigator.userActivation?.isActive) {
    document.getElementById("secondFile").click();
  }
});

总结 #

目前没有全浏览器兼容的纯自动触发第二个文件选择器的实现，要么合并为多文件选择，要么增加一次用户点击操作，这两类方案都是生产环境可用的稳定方案。

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