JavaScript 文件上传指南：使用 FormData 对象

使用 JavaScript 和 FormData 对象上传文件

想要使用 JavaScript 将文件上传到服务器？FormData 对象可以轻松实现！

以下是使用 FormData 对象上传文件的步骤：

**创建一个 FormData 对象。**2. **使用 append() 方法将文件添加到 FormData 对象。**3. 创建一个 HTTP 请求，并将 FormData 对象作为请求体发送。

以下是一个完整的示例代码：

function sendFile(file) {
  var url = 'https://api.example.com/upload'; // 请求的URL

  var formData = new FormData();
  formData.append('file', file); // 将文件添加到FormData对象

  var options = {
    method: 'POST',
    body: formData
  };

  return fetch(url, options)
    .then(function(response) {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      return response.json();
    });
}

// 示例用法：
var inputFile = document.getElementById('fileInput').files[0]; // 获取文件输入框的文件
sendFile(inputFile)
  .then(function(response) {
    console.log('文件上传成功:', response);
  })
  .catch(function(error) {
    console.error('文件上传失败:', error);
  });

代码解释：

该代码假设你有一个文件输入框 <input type='file' id='fileInput'> 用于选择文件。
sendFile 函数接收一个文件对象作为参数。
FormData 对象用于创建表单数据。
append() 方法将文件添加到 FormData 对象中，键名为 'file'。
fetch() 函数发送 HTTP 请求，请求方法为 POST，请求体为 FormData 对象。
response.ok 用于检查请求是否成功。
response.json() 用于解析服务器返回的 JSON 数据。

注意：

确保服务器端代码能够处理文件上传请求。
你可以根据需要修改代码来适应你的实际情况，例如修改请求 URL、添加额外的表单数据等。

希望这个示例能够帮助你快速上手 JavaScript 文件上传功能！