File API：读取和上传本地文件

File API 是 JavaScript 中一个非常有用的功能，它可以让我们通过 JavaScript 操作本地文件。本文将介绍如何使用 File API 读取和上传本地文件，包括 File、FileList、FileReader、FormData 等对象和方法。

读取本地文件

要读取本地文件，我们需要使用 <input type="file"> 元素来创建一个文件选择器，然后监听 change 事件，在事件处理函数中获取选择的文件。下面是一个示例：

<input type="file" id="file-input">

<script>
  const fileInput = document.getElementById('file-input');
  fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsText(file);
    reader.addEventListener('load', () => {
      console.log(reader.result);
    });
  });
</script>

在这个示例中，我们首先创建了一个 <input type="file"> 元素，并给它一个 id。然后，我们使用 document.getElementById() 方法获取这个元素，并监听它的 change 事件。在事件处理函数中，我们首先获取选择的文件，然后创建一个 FileReader 对象，并调用它的 readAsText() 方法来读取文件内容。readAsText() 方法会异步地读取文件，并在读取完成后触发 load 事件。我们可以在 load 事件处理函数中获取文件内容，它保存在 FileReader 对象的 result 属性中。

除了 readAsText() 方法，FileReader 还提供了其他方法，如 readAsDataURL()、readAsArrayBuffer() 等等，可以根据需要选择不同的方法来读取文件内容。

上传本地文件

在 Web 应用程序中，我们通常需要上传本地文件到服务器。要实现这个功能，我们需要使用 <input type="file> 元素创建一个文件选择器，然后监听 change 事件，在事件处理函数中获取选择的文件，并将它上传到服务器。

下面是一个简单的示例，展示如何上传本地文件：

<form id="upload-form">
  <input type="file" id="file-input">
  <button type="submit">上传文件</button>
</form>

<script>
  const uploadForm = document.getElementById('upload-form');
  const fileInput = document.getElementById('file-input');
  uploadForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.text())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
  });
</script>

在这个示例中，我们首先创建了一个表单，并在表单中添加了一个文件选择器和一个提交按钮。然后，我们使用 document.getElementById() 方法获取表单和文件选择器，并监听表单的 submit 事件。在事件处理函数中，我们首先调用 preventDefault() 方法阻止表单默认的提交行为，然后获取选择的文件，创建一个 FormData 对象，并将文件添加到 FormData 对象中。最后，我们使用 fetch() 方法将 FormData 对象上传到服务器，并在上传完成后处理服务器的响应。

需要注意的是，上传文件时需要使用 POST 请求，并将 FormData 对象作为请求体发送到服务器。服务器端需要相应的处理程序来接收上传的文件，并将其保存到服务器上。

除了上述示例中使用的 fetch() 方法，还可以使用 XMLHttpRequest 对象来上传文件。具体实现方式可以参考 MDN 文档中的示例。

总结

总结一下，File API 是 JavaScript 中一个非常有用的功能，它可以让我们通过 JavaScript 操作本地文件。我们可以使用 File、FileList、FileReader、FormData 等对象和方法来读取和上传本地文件，从而实现一些有趣的功能，例如：图片预览、文件上传、文件下载等。