HTML中如何通过自定义按钮直接选中已知路径的指定文件

很遗憾，你想要的直接传入文件路径、自动选中指定文件的功能，在普通浏览器环境下完全无法实现。

核心原因 #

浏览器对<input type="file">存在严格的安全沙箱限制：

• 所有文件选择操作必须由用户的主动交互（比如点击、触摸）触发
• 完全禁止JavaScript主动操作文件选择路径、自动选中本地文件
  这一规则是浏览器的基础安全策略，目的是避免恶意网页在用户无感知的情况下窃取本地隐私文件，如果允许你提到的document.getElementById('my_file').click(fname)这类用法，用户设备上的任意文件都可能被恶意网页静默读取，会造成严重的安全风险。

不同场景的替代方案 #

• 普通网页场景：只能保留用户手动选择文件的流程，最多可以通过JS触发文件输入框的点击事件唤起选择弹窗，无法跳过用户手动选择的步骤，也不能预设选中路径。
• Electron/NW.js等桌面混合开发场景：这类框架本身开放了本地文件系统操作权限，你可以直接通过路径读取对应文件内容，手动构造File对象后赋值给文件输入框，也可以直接使用读取到的文件内容做后续业务处理，不需要依赖原生文件选择框的交互。

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