要使用 Ajax 和 FormData 对象传参，核心在于正确构建 FormData 对象并配置 Ajax 请求。FormData 主要用于发送表单数据，特别是文件上传，因为它能够模拟 `multipart/form-data` 格式的表单提交。以下是一个从创建 FormData 对象到发送 Ajax 请求的详细教程。 ### 一、FormData 对象基础操作 首先，你需要创建一个 FormData 对象。可以根据现有表单创建，也可以手动创建。 | 创建方式 | 代码示例 | 说明 | | :--- | :--- | :--- | | **从表单创建** | `var formData = new FormData(document.getElementById('myForm'));` | 自动收集指定表单内所有带 `name` 属性的表单元素值 [ref_3][ref_6]。 | | **手动创建** | `var formData = new FormData();` | 创建一个空对象，然后使用 `append()` 方法添加数据 [ref_1][ref_2][ref_3]。 | 创建 FormData 对象后，通过 `append()` 方法添加参数 [ref_1][ref_2][ref_3][ref_5]。该方法语法为： ```javascript formData.append(name, value); formData.append(name, blob, fileName); // 用于添加文件 ``` ### 二、参数类型与添加方法 可以添加多种类型的参数，包括文本、文件和 Blob 对象。 | 参数类型 | 添加方法示例 | 应用场景 | | :--- | :--- | :--- | | **文本/数值** | `formData.append('username', '张三');` | 提交普通的表单字段。 | | **文件（File）** | `formData.append('avatar', fileInput.files[0]);` | 上传用户从 `<input type="file">` 选择的文件 [ref_2][ref_3][ref_6]。 | | **Blob/Base64** | `formData.append('image', blob, 'compressed.jpg');` | 上传经过 Canvas 压缩或由 Base64 转换的图片 [ref_1]。 | 例如，将一个 Base64 编码的图片字符串转换为文件对象并添加到 FormData： ```javascript // 将Base64字符串转为Blob/File对象的函数 [ref_1] function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); } // 使用示例 var base64String = 'data:image/png;base64,iVBORw0KGgo...'; // 你的Base64数据 var file = dataURLtoFile(base64String, 'converted.png'); formData.append('imageFile', file); ``` ### 三、发起 Ajax 请求（以 jQuery 为例） 使用 FormData 时，Ajax 请求的配置是关键，必须正确设置 `processData` 和 `contentType` 参数。 ```javascript // 假设 formData 对象已经构建完成 $.ajax({ url: '/api/upload', // 你的后端接口地址 type: 'POST', // 必须为 POST，因为 FormData 通常用于 POST 请求 data: formData, // 将 FormData 对象作为请求体 processData: false, // 必须设置为 false，阻止 jQuery 对 data 对象进行序列化处理 [ref_2][ref_4][ref_5] contentType: false, // 必须设置为 false，让浏览器自动设置正确的 Content-Type（multipart/form-data 及 boundary） [ref_2][ref_4][ref_5] success: function(response) { console.log('上传成功:', response); // 处理成功响应 }, error: function(jqXHR, textStatus, errorThrown) { console.error('上传失败:', textStatus, errorThrown); // 处理错误 } }); ``` **关键配置说明：** 1. **`processData: false`**: 默认情况下，jQuery 会将 `data` 对象转换为查询字符串 `application/x-www-form-urlencoded`。FormData 是二进制数据，不能被这样处理，必须禁用此选项 [ref_4][ref_5]。 2. **`contentType: false`**: 默认情况下，jQuery 会设置 `Content-Type` 请求头。设为 `false` 后，浏览器会自动为 FormData 请求设置正确的 `Content-Type`，即 `multipart/form-data` 并附带 boundary 分隔符 [ref_4][ref_5]。 ### 四、完整示例：带文件上传的表单 以下是一个结合了普通字段和文件上传的完整前端示例。 ```html <!-- HTML 表单 --> <form id="myForm"> <input type="text" name="nickname" placeholder="昵称"> <input type="file" name="avatar" id="avatarInput" accept="image/*"> <button type="button" id="submitBtn">提交</button> </form> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('#submitBtn').click(function() { // 1. 从表单创建 FormData 对象 [ref_3][ref_6] var formData = new FormData(document.getElementById('myForm')); // 2. （可选）手动追加额外参数 var extraInfo = { level: 'VIP', timestamp: Date.now() }; formData.append('extra', JSON.stringify(extraInfo)); // 3. 发起 Ajax 请求 $.ajax({ url: '/api/user/profile', type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { alert('个人信息更新成功！'); }, error: function(xhr, status, error) { alert('上传失败，请重试。错误：' + error); } }); }); }); </script> ``` ### 五、注意事项与兼容性 1. **兼容性**：FormData 在现代浏览器中得到良好支持（IE10+）。对于旧版浏览器，可能需要回退方案，例如使用 iframe 模拟表单提交 [ref_3][ref_6]。 2. **文件大小与类型**：前端可以添加文件大小和类型的校验，但最终的安全校验必须在后端进行。 3. **纯 JavaScript 实现**：如果不使用 jQuery，可以使用原生的 `XMLHttpRequest` 发送 FormData [ref_2][ref_5][ref_6]。 ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/upload'); xhr.onload = function() { /* 处理响应 */ }; xhr.send(formData); ``` 4. **后端处理**：后端接口需要能够解析 `multipart/form-data` 格式的请求。不同的后端框架（如 Spring Boot、Express、Django）都有相应的库来处理文件上传。 综上所述，使用 FormData 进行 Ajax 传参的核心步骤是：创建 FormData 对象、使用 `append()` 方法添加参数、配置 Ajax 请求时设置 `processData: false` 和 `contentType: false`。这种方式是实现无刷新文件上传和复杂表单提交的标准且高效的方法 [ref_2][ref_4][ref_5]。