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

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

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。

标签： javascript java html js json 编码 浏览器 app 后端 常见问题