如何仅通过JavaScript为type="file"类型的input元素赋值并提交表单？

核心限制说明 #

• 所有主流浏览器出于安全策略限制，不允许网页内运行的纯JavaScript直接修改type="file"上传控件的value属性，也无法操作系统弹出的文件选择窗口，该限制没有绕过方法。
• 这个规则的设计目的是避免恶意网页在用户不知情的情况下，静默读取用户本地磁盘的隐私文件，属于浏览器前端安全的底层硬限制。

不同场景的可行方案 #

场景1：自动化测试/爬虫等非用户端网页场景 #

如果你是做自动化测试、批量数据提交等离线/内部场景，不需要在公开用户网页中实现，可以使用浏览器自动化工具绕过前端限制，常见工具包括Selenium、Playwright、Puppeteer，这类工具运行在浏览器外的控制层，不受前端JS安全策略约束。

以Playwright为例，直接调用对应API即可完成文件赋值提交：

// 给文件上传控件赋值本地路径
await page.locator('#yourfile').setInputFiles('c:\\users\\admin\\desktop\\myfile.jpg');
// 填充姓名并提交表单
await page.locator('#yourname').fill('Paul');
await page.locator('input[type="submit"]').click();

场景2：网页为自主开发、上传文件可在前端生成 #

如果你是该表单网页的开发者，且需要上传的文件可以在前端通过JS生成（比如Canvas导出的图片、接口拉取的Blob资源、用户拖入页面的文件等），可以直接构造FormData异步提交，不需要用户手动选择文件：

// 构造提交用的表单数据
const submitFormData = new FormData();
submitFormData.append('yourname', 'Paul');
// 示例：构造一个File对象，实际使用时可以替换为其他合法Blob/File来源
const uploadFile = new File(['文件二进制内容'], 'myfile.jpg', {type: 'image/jpeg'});
submitFormData.append('yourfile', uploadFile);

// 异步提交表单
fetch('你的表单提交接口地址', {
  method: 'POST',
  body: submitFormData
}).then(res => res.json()).then(data => {
  // 处理提交结果
});

场景3：公开用户端网页场景 #

如果你需要在公开访问的普通用户网页中实现自动填充本地文件的功能，没有任何可行方案，必须由用户手动点击文件选择控件、或者拖放本地文件到指定区域完成上传操作。

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