使用 FormData 上传图片

在我们的 Web 应用程序中，上传图片是一项常见的任务。而 FormData API 可以帮助我们轻松地实现这项任务。本文将向您介绍如何使用 FormData API 来上传图片。

创建 HTML 表单

首先，我们需要在 HTML 中创建一个表单，以使用 FormData API。在表单中，我们需要一个 input 元素，来让用户选择要上传的图片。这个元素的 type 属性应该是 file。在表单中，我们也可以添加其它元素，如 input、select 等元素，以收集用户输入的数据。

示例代码如下：

<form id="myForm">
  <input type="file" name="myImage">
  <input type="text" name="myCaption">
  <button type="submit">上传图片</button>
</form>

使用 JavaScript 上传图片

当用户选择了要上传的图片后，我们需要使用 JavaScript 将图片上传到服务器。我们可以监听表单的 submit 事件，以在表单提交时执行上传操作。

在表单提交事件处理程序中，我们需要创建 FormData 对象。然后，我们可以使用 append 方法，将要上传的图片所对应的 input 元素添加到 FormData 对象中。最后，我们可以使用 XMLHttpRequest 对象来发送数据，并在服务器响应返回后执行回调函数。

示例代码如下：

const form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  const formData = new FormData(form);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/upload');
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  };
  xhr.send(formData);
});

在这个示例代码中，我们首先阻止了表单的默认提交行为。然后，我们创建了一个 FormData 对象，并将表单元素添加到了 FormData 对象中。最后，我们创建了一个 XMLHttpRequest 对象，将数据发送到 /api/upload 地址，并在服务器响应后执行回调函数。

总结

本文向您介绍了如何使用 FormData API 来上传图片。通过在 HTML 表单中添加 input 元素，并使用 JavaScript 创建 FormData 对象，我们可以轻松地上传图片到服务器。希望这篇文章对您有所帮助。