JavaScript 中怎么使用 Ajax 结合 FormData 实现多图上传-js教程-PHP中文网

用ajax结合formdata实现多图上传，核心是将多个文件添加到formdata对象并发送，不手动设置content-type，后端用multer等中间件解析multipart/form-data。

javascript 中怎么使用 ajax 结合 formdata 实现多图上传

用 Ajax 结合 FormData 实现多图上传，核心是把多个文件塞进 FormData 对象，再通过 XMLHttpRequest 或 fetch 发送到后端。关键点在于：不手动序列化文件、设置正确的请求头（让浏览器自动处理 boundary）、后端能正确解析 multipart/form-data。

1. 前端：构造 FormData 并添加多个文件

从 <input type="file" multiple> 获取文件列表，遍历添加到 FormData。注意：每个文件可以单独命名（如 images[] 或 file），方便后端统一接收。

HTML 中启用多选：<input type="file" id="fileInput" multiple accept="image/*">
JS 中读取并追加：

const input = document.getElementById('fileInput');
input.addEventListener('change', function() {
  const files = this.files; // FileList 对象
  const formData = new FormData();
<p>// 方式一：统一字段名（推荐，后端收为数组）
for (let i = 0; i </p><p>// 方式二：带索引（可选，便于前后端一一对应）
// for (let i = 0; i image_${i}, files[i]);
// }</p><p>// 发送请求（见下一步）
});
</p>

2. 发送请求：用 fetch 或 XMLHttpRequest（无需设 Content-Type）

FormData 自带 boundary，切勿手动设置 Content-Type，否则浏览器无法自动注入 boundary，导致后端解析失败。

Alibabacloud Sdk Client Initialization For Java

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

下载

使用 fetch（简洁推荐）：

fetch('/upload', {
  method: 'POST',
  body: formData // 直接传入，不要 JSON.stringify
  // ⚠️ 不要写 headers: { 'Content-Type': 'multipart/form-data' }
})
.then(res => res.json())
.then(data => console.log('上传成功:', data))
.catch(err => console.error('上传失败:', err));

用 XMLHttpRequest 同理，只设 method 和 body，不碰 request header 的 Content-Type。

3. 后端接收要点（以 Express + multer 为例）

前端发的是 multipart/form-data，后端需用支持该格式的中间件解析。

安装：npm install multer
配置 multer 接收多个同名字段（对应前端 formData.append('images', file)）：

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
<p>app.post('/upload', upload.array('images'), (req, res) => {
console.log(req.files); // 数组，每个元素含 originalname、path、size 等
res.json({ success: true, count: req.files.length });
});
</p>

⚠️ 字段名 'images' 必须和前端 formData.append('images', ...) 一致；upload.array() 表示接收多个同名文件。

4. 可选增强：进度监听与错误处理

上传大图时建议加进度条，fetch 本身不支持原生进度，可用 XMLHttpRequest；或用 XMLHttpRequest.upload.onprogress。

监听上传进度示例（XMLHttpRequest）：

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传中... ${percent.toFixed(1)}%`);
  }
};
xhr.onload = () => console.log('完成');
xhr.onerror = () => console.error('网络错误');
xhr.open('POST', '/upload');
xhr.send(formData);

补充简单校验（如文件类型、大小）可在 input.change 里做：

for (let file of files) {
  if (!file.type.startsWith('image/')) {
    alert(`${file.name} 不是图片文件`);
    return;
  }
  if (file.size > 5 * 1024 * 1024) { // 5MB
    alert(`${file.name} 超过 5MB`);
    return;
  }
}

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南