如何使用JavaScript将文件赋值给文件输入框并通过表单传递？

你可以通过以下两种常用方式实现表单传递： #

方式1：绑定到现有HTML表单提交 #

如果你页面上有现成的<form>表单结构，可以通过DataTransfer接口将你创建的file对象绑定到文件输入控件，再走正常表单提交流程：

1. 先准备表单DOM（必须指定enctype="multipart/form-data"）：

<form id="uploadForm" action="/你的后端接口地址" method="POST" enctype="multipart/form-data">
  <input type="file" name="audio_file" id="audioInput" accept="audio/mp3" hidden>
  <button type="submit">上传音频</button>
</form>

2. JS绑定文件到输入控件：

const audioInput = document.getElementById('audioInput');
const dataTransfer = new DataTransfer();
// 将你已经创建好的file对象加入DataTransfer
dataTransfer.items.add(file);
// 把生成的FileList赋值给文件输入控件
audioInput.files = dataTransfer.files;

后续你要么让用户点击提交按钮，要么主动执行document.getElementById('uploadForm').submit()都可以完成表单提交，文件会以audio_file为字段名传给后端。 #

方式2：纯JS构造FormData异步提交 #

不需要依赖页面上的表单DOM，直接构造FormData对象携带文件提交即可，这是前后端分离场景下最常用的方案：

// 初始化FormData实例
const formData = new FormData();
// 追加文件，第一个参数是后端约定的接收字段名，可自行修改
formData.append('audio_file', file);

// 用fetch提交示例，用axios等其他请求库同理
fetch('/upload/api', {
  method: 'POST',
  body: formData
  // 注意：不要手动设置Content-Type请求头，浏览器会自动生成带边界标识的正确值
}).then(res => res.json())
.then(result => {
  // 处理提交成功逻辑
}).catch(err => {
  // 处理提交失败逻辑
});

注意事项 #

• 两种方式都要求表单编码类型为multipart/form-data，使用FormData异步提交时浏览器会自动处理该配置，无需手动设置。
• 追加文件时的字段名需要和后端接收参数的字段名完全一致，否则后端无法正常解析到文件。

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