JavaScript中文件上传API详解

文件上传是网站开发中经常需要实现的功能之一，而JavaScript作为前端语言也提供了一些API来帮助我们实现文件上传的功能。

input标签的type属性为file的使用

最常见的文件上传方式就是使用表单中的input标签，将type属性值设为file。用户在选择了文件后，会将文件的信息保存在该标签的value属性中。我们可以通过编写onchange事件，获取该标签中选中的文件，然后实现上传。

示例代码：

<input type="file" onchange="uploadFile(this.files)">
<script>
function uploadFile(fileList) {
  const file = fileList[0];
  const formData = new FormData();
  formData.append('file', file);
  // 在这里编写代码将formData上传到服务器
}
</script>

XMLHttpRequest实现文件上传

XMLHttpRequest是浏览器内置的发送HTTP请求的对象，我们可以通过它来实现文件上传的功能。

但是，使用XMLHttpRequest上传文件需要一些额外的配置，比如设置请求头，将文件转成二进制流等。

示例代码：

<input type="file" onchange="uploadFile(this.files)">
<script>
function uploadFile(fileList) {
  const file = fileList[0];
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');
  xhr.send(file);
}
</script>

说明：

1. XMLHttpRequest的open方法指定了请求的方法和地址；
2. setRequestHeader方法设置了请求头的Content-Type为multipart/form-data；
3. send方法发送了选中的文件到服务器。

fetch实现文件上传

fetch是ES6新增的用来发送HTTP请求的函数，与XMLHttpRequest相比，它的API更简单。

示例代码：

<input type="file" onchange="uploadFile(this.files)">
<script>
function uploadFile(fileList) {
  const file = fileList[0];
  fetch('/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'multipart/form-data' },
    body: file
  });
}
</script>

说明：

1. fetch的第一个参数是请求的地址；
2. 第二个参数是一个对象，包含了请求的方法、请求头和请求体。

总结

文件上传是前端开发中常见的功能之一，JavaScript提供了多种方式来实现文件上传。本文简要介绍了使用input标签的type属性为file、XMLHttpRequest和fetch三种方式来实现文件上传。