```javascript const formData = new FormData(); formData.append('file', file); ``` ### 上述代码解释： 1. **`new FormData()`**: - `FormData` 是一个内置的 JavaScript 对象，用于构造键值对（key-value pairs），通常用来模拟 HTML 表单数据。它主要用于通过 AJAX 或 Fetch API 提交表单数据到服务器。 - 创建一个 `FormData` 对象后，可以向其中添加各种字段（包括文件和其他表单数据）。 2. **`formData.append('file', file)`**: - `append(key, value)` 方法用于向 `FormData` 对象中添加一个新的键值对。 - 在这个例子中： - `'file'` 是键（key），表示提交给服务器时的字段名称。 - `file` 是值（value），表示要上传的文件对象。这个文件对象通常是用户通过 `<input type="file">` 选择的文件（例如：`fileInput.files[0]`）。 3. **用途**: - 当你使用 `fetch` 或 `XMLHttpRequest` 向服务器发送文件时，`FormData` 对象会将文件和表单数据打包成适合 HTTP 请求的格式（通常是 `multipart/form-data` 格式）。 - 服务器端可以根据字段名（如这里的 `'file'`）来解析并接收文件。 #### 示例代码：完整的文件上传示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>File Upload</title> </head> <body> <h2>Upload File</h2> <input type="file" id="fileInput" /> <button onclick="uploadFile()">Upload</button> <p id="status"></p> <script> function uploadFile() { const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; // 获取用户选择的第一个文件 if (!file) { alert('Please select a file first.'); return; } // 创建 FormData 对象 const formData = new FormData(); formData.append('file', file); // 将文件添加到 FormData 中 // 使用 fetch 发送文件到服务器 fetch('/upload', { // '/upload' 是服务器端接收文件的接口地址 method: 'POST', body: formData // 发送 FormData 对象 }) .then(response => response.json()) .then(data => { document.getElementById('status').textContent = `File uploaded successfully. Server response: ${data.message}`; }) .catch(error => { console.error('Error:', error); document.getElementById('status').textContent = 'An error occurred during file upload.'; }); } </script> </body> </html> ``` ### 解释： 1. 用户通过 `<input type="file">` 选择一个文件。 2. `fileInput.files[0]` 获取用户选择的第一个文件。 3. 创建 `FormData` 对象，并使用 `formData.append('file', file)` 将文件添加到其中。 4. 使用 `fetch` 将 `FormData` 对象作为请求体发送到服务器。 --- ### 总结： - `new FormData()` 用于创建一个空的 `FormData` 对象。 - `formData.append('file', file)` 将文件添加到 `FormData` 对象中，准备发送到服务器。 - 这种方式常用于通过 AJAX 或 Fetch API 实现文件上传功能。