HTML中创建file类型input元素并为value赋值不生效问题咨询

所有主流浏览器出于安全防护目的，严格禁止通过代码（包括JS脚本、服务端渲染HTML属性的方式）给<input type="file">的value属性赋值绑定本地文件，防止恶意网站未经用户许可私自窃取、上传用户本地的敏感文件。

两种写法失效的具体逻辑：

• JS动态创建元素的场景：你执行videoInput.value = videoFile的操作会被浏览器直接静默忽略。file类型输入框的value属性仅支持两种赋值：由用户主动点击选择文件后浏览器自动填充文件路径（现代浏览器只会返回伪造的C:\fakepath\文件名格式字符串，不会暴露真实本地路径），或者赋值为空字符串清空已选文件，任何脚本传入的File对象、自定义路径都不会被识别。
• Pug模板渲染的场景：Pug是服务端模板引擎，运行时根本无法访问用户本地的videoFile对象，就算你把变量传到模板里，渲染出来的HTML属性只会是value="[object File]"这类无意义的字符串，同样会被浏览器的安全规则拦截，不会生成选中文件的效果。

根据你的使用场景选对应方案即可：

场景1：已拿到File实例，需要插入input随表单原生提交 #

如果你已经通过拖拽、其他文件选择器、摄像头录制等用户交互合法拿到了videoFile这个File实例，不要给value赋值，用DataTransferAPI构造文件列表绑定到input的files属性：

const videoInput = document.createElement("input");
videoInput.type = "file";
videoInput.name = "video"; // 必须设置name属性，否则表单提交不会携带该字段
// 构造文件容器写入目标文件
const dt = new DataTransfer();
dt.items.add(videoFile);
// 绑定文件列表到输入框
videoInput.files = dt.files;
RecordForm.appendChild(videoInput);

注意：该方案仅支持2020年后发布的现代Chrome、Firefox、Edge版本，IE浏览器不支持。

场景2：不需要展示原生file输入框，仅需提交时携带文件 #

不需要额外插入DOM元素，直接在提交表单时把文件手动追加到FormData里即可：

// 监听表单提交事件
RecordForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const formData = new FormData(RecordForm);
  // 手动追加已有的视频文件
  formData.append("video", videoFile);
  // 后续用fetch/XMLHttpRequest发送formData到服务端即可
});

这种方式更灵活，也不需要处理input插入后的样式问题，是异步提交表单场景的常用方案。

场景3：服务端渲染阶段想预置选中文件 #

没有实现可能，Pug作为服务端模板没有权限访问客户端本地文件，这类需求只能在客户端加载完成后通过上面两种JS方案实现，你可以在页面加普通文本提示用户当前需要上传的目标文件，无法直接让file input默认选中本地文件。

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