javascript如何实现文件上传_FormData对象如何使用？-js教程-PHP中文网

javascript如何实现文件上传_FormData对象如何使用？

紅蓮之龍

发布： 2025-12-18 21:12:56

原创

832人浏览过

JavaScript文件上传核心是用FormData构建数据并用fetch或XMLHttpRequest发送，自动处理二进制、boundary和编码；需通过File/Blob添加文件，不可用路径；fetch不支持上传进度，需用XMLHttpRequest监听xhr.upload.onprogress。

javascript如何实现文件上传_formdata对象如何使用？

JavaScript 实现文件上传，核心是用 FormData 构建表单数据，再配合 fetch 或 XMLHttpRequest 发送到后端。它能自动处理文件二进制内容、边界（boundary）和编码，比手动拼接更可靠。

如何创建并填充 FormData 对象

FormData 可以从 HTML 表单元素直接生成，也可以手动创建后追加字段。文件必须通过 File 或 Blob 实例添加，不能用路径字符串。

从表单创建（推荐）：

const form = document.getElementById("uploadForm");<br>const formData = new FormData(form); // 自动包含所有带 name 的 input[type=file]

登录后复制

手动创建并添加文件：

const formData = new FormData();<br>const fileInput = document.querySelector('input[type="file"]');<br>if (fileInput.files.length > 0) {<br>  formData.append("photo", fileInput.files[0]); // 第二个参数是 File 对象<br>}

登录后复制

还可添加普通字段：

formData.append("username", "alice");<br>formData.append("description", "My profile photo");

登录后复制

使用 fetch 发送 FormData（最常用）

调用 fetch 时，直接传入 FormData 实例即可。注意：不要设置 Content-Type 头，浏览器会自动设置为 multipart/form-data 并带上正确的 boundary。

情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

查看详情

基础上传示例：

fetch("/api/upload", {<br>  method: "POST",<br>  body: formData // 不要加 headers: { "Content-Type": ... }<br}).then(r => r.json()).then(data => console.log(data));

登录后复制

如需带认证或其它头（除 Content-Type 外），可以加：
headers: { "Authorization": "Bearer xxx" } —— 但依然不要覆盖 Content-Type

支持上传多个同名文件：

for (let file of fileInput.files) {<br>  formData.append("photos", file); // 使用相同 key<br>}

登录后复制

，后端收到的是文件数组

监听上传进度（仅 XMLHttpRequest 支持原生进度）

fetch 目前不提供上传进度事件，如需显示进度条，得用 XMLHttpRequest：

立即学习“Java免费学习笔记（深入）”；

const xhr = new XMLHttpRequest();<br>xhr.upload.onprogress = e => {<br>  if (e.lengthComputable) {<br>    console.log(`上传中：${(e.loaded / e.total * 100).toFixed(1)}%`);<br>  }<br>};<br>xhr.open("POST", "/api/upload");<br>xhr.send(formData);

登录后复制

注意：xhr.upload 是专门用于监听上传过程的对象，xhr.onprogress 是下载进度

常见问题与注意事项

文件没传过去？ 检查 input 是否有 name 属性（表单方式），或 append 时 key 是否写错；后端接收字段名必须一致
后端收不到文件？ 确保后端接口支持 multipart/form-data 解析（如 Express 需 multer，Koa 需 @koa/multer）
大文件卡顿？ 可结合分片上传或添加 loading 提示；FormData 本身不压缩，体积等于原始文件
想预览图片？ 用 URL.createObjectURL(file) 生成临时 URL，赋给 <img src alt="javascript如何实现文件上传_FormData对象如何使用？" > 即可，无需上传