JavaScript 中 Ajax 怎么使用 FormData 对象发送带文件的 multipart 请求-js教程-PHP中文网

javascript 中用 ajax 发送带文件的 multipart 请求，核心是用 formdata 构造请求体且不手动设置 content-type——浏览器自动添加含 boundary 的 multipart/form-data 头；fetch 或 xmlhttprequest 直接传 formdata 即可，后端用对应框架解析文本字段与文件。

javascript 中 ajax 怎么使用 formdata 对象发送带文件的 multipart 请求

在 JavaScript 中用 Ajax 发送带文件的 multipart 请求，核心是用 FormData 构造请求体，并确保 XMLHttpRequest 或 fetch 不手动设置 Content-Type —— 浏览器会自动添加正确的 multipart/form-data 边界（boundary）。

创建 FormData 并追加字段和文件

FormData 对象天然支持混合文本字段与 File / Blob。你可以像表单提交一样逐个追加：

文本字段：直接传字符串，如 formData.append('username', 'Alice')
单个文件：传 <input type="file"> 的 files[0]，如 formData.append('avatar', fileInput.files[0])
多个同名文件（如多图上传）：循环追加，名称相同即可，后端会收到数组或列表
指定文件名（可选）：formData.append('photo', blob, 'custom.jpg')，第三个参数覆盖原始文件名

用 fetch 发送（推荐，更简洁）

fetch 是现代首选。关键点：不设 headers['Content-Type']，让浏览器自动生成带 boundary 的 multipart 头：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const formData = new FormData();
formData.append('title', '我的图片');
formData.append('image', document.getElementById('fileInput').files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData // 直接传 FormData，无需 JSON.stringify
  // ❌ 不要写 headers: { 'Content-Type': 'multipart/form-data' }
})
.then(r => r.json())
.then(data => console.log(data));

用 XMLHttpRequest 发送（兼容旧环境）

原理相同，但需注意：xhr.send(formData) 即可，不要调用 setRequestHeader 设置 Content-Type：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};

const formData = new FormData();
formData.append('desc', '这是说明');
formData.append('cover', coverFile);

xhr.send(formData); // ✅ 自动处理 multipart