动态更新上传组件files属性时仅Safari触发change事件该如何处理？

核心问题根源 #

这个差异本质是各浏览器对原生<input type="file">的安全策略执行尺度不同：

• Chrome、Edge、Firefox 严格遵循文件安全沙箱规则：禁止脚本直接修改原生输入框的files属性后自动触发change事件，这类操作会被浏览器静默拦截事件触发逻辑，不会对外抛出状态变更通知
• Safari 没有完全对齐这一安全限制，脚本修改files属性时会按逻辑正常触发change回调，最终造成了仅 Safari 表现正常、其余浏览器无响应的兼容问题。

可落地的解决思路 #

• 不要把原生文件控件的change事件作为上传流程的唯一触发入口
  拖拽交互捕获drop事件时拿到的e.dataTransfer.files本身就是合规可用的FileList结构，可直接作为上传逻辑的输入源。交互完成后手动更新组件内部状态即可，不需要刻意将文件赋值给原生输入控件，再依赖其内置事件触发流程。

• 如需保持自定义组件与原生输入控件的状态对齐，可主动调度事件
  如果业务上必须通过原生输入控件承载文件状态，在脚本完成files属性赋值后，可手动构造并派发符合规范的change事件，绕过浏览器的自动拦截：

  const fileInput = document.querySelector('input[type="file"]');
  // 赋值完成后主动派发事件，开启冒泡属性保证外层监听器可捕获
  fileInput.dispatchEvent(new Event('change', { bubbles: true }));
  

• 多交互路径做逻辑收敛，消除兼容分支
  不管是用户点击触发原生文件选择的路径，还是拖拽到自定义区域的路径，最终统一传入同一个内部文件处理函数：

  • 原生控件的change事件回调，直接将fileInput.files传入统一处理函数
  • 拖拽drop事件回调，直接将e.dataTransfer.files传入同一个统一处理函数
    这样两条交互路径拿到文件后，会走完全一致的格式校验、文件预览、上传触发逻辑，不需要为单浏览器的特殊表现单独写兼容分支。

注意：高版本浏览器对脚本直接改写原生input[type=file]的files属性存在逐步收紧的安全限制，如果需要覆盖较广的浏览器版本范围，优先推荐采用逻辑收敛的方案，减少对原生控件内置属性的直接操作。

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