表单数据上传文件 - Javascript

在现代 web 应用中，常常需要上传文件。上传文件时，需要将表单数据一起提交。在 Javascript 中，可以通过 FormData 对象来实现表单数据上传文件的功能。

FormData 对象

FormData 对象是一个用来表示表单数据的 key-value 对象。用它可以在表单数据中添加 key-value 对。例如：

const formData = new FormData();
formData.append('username', 'tom');
formData.append('password', '123456');

以上代码创建了一个 FormData 对象，并向其中添加了两个 key-value 对，分别是 username 和 password。

上传文件

上传文件时，需要用到 input 标签中的 type 属性为 file 的元素。这个元素允许我们从文件系统中选择文件，并通过 JavaScript 代码将其上传到服务器。

<form>
  <input type="file" name="avatar">
  <button type="submit">上传</button>
</form>

在表单提交时，可以使用 JavaScript 将表单数据和文件一起提交到服务器。例如：

const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
  event.preventDefault();

  const formData = new FormData();
  formData.append('avatar', form.elements.avatar.files[0]);

  fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
});

以上代码中，我们通过 form 元素的 elements 属性获取到名为 avatar 的元素，并通过 files 属性获取到选择的文件。然后将文件和表单数据一起添加到了 FormData 对象中，最后向服务器发起 POST 请求。

总结

Javascript 提供了非常方便的方式来上传文件和表单数据。通过使用 FormData 对象，我们可以轻松地构建出需要上传的表单数据。配合 input 标签的 file 类型，我们就可以将文件上传到服务器了。