HTML 使用Fetch API实现上传进度指示器

在本文中，我们将介绍如何使用HTML的Fetch API来实现上传进度指示器。上传进度指示器是在网页上展示上传文件的进度的一种方式，可以让用户清楚地知道上传的情况。

阅读更多：HTML 教程

Fetch API简介

Fetch API是一种现代的Web API，用于进行网络请求，包括发送和接收数据。它提供了更强大和更灵活的功能，比传统的XMLHttpRequest对象更加易于使用。

要使用Fetch API发送一个文件，我们需要将文件封装为FormData对象，然后将其作为请求的body部分。下面是一个示例：

const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log('上传成功:', data);
})
.catch(error => {
  console.error('上传失败:', error);
});

在上面的示例中，我们首先获取了一个文件输入元素，并将选择的文件添加到FormData对象中。然后，我们使用fetch函数发送一个POST请求，将FormData对象作为请求的body部分。最后，在响应成功后，我们将返回的数据打印到控制台。

监听上传进度

要实现上传进度指示器，我们可以使用XMLHttpRequest对象的upload事件来监听上传的进度。Fetch API同时也支持这个事件，我们可以通过传递一个带有upload属性的配置对象来实现。

下面是一个使用Fetch API监听上传进度的示例：

const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData,
  upload: (progressEvent) => {
    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    console.log(`上传进度: ${progress}%`);
  }
})
.then(response => response.json())
.then(data => {
  console.log('上传成功:', data);
})
.catch(error => {
  console.error('上传失败:', error);
});

在上面的示例中，我们在配置对象中添加了一个upload属性，并赋值为一个匿名函数。在这个函数中，我们可以通过progressEvent对象的loaded和total属性计算出上传的进度，并将其打印到控制台。

自定义上传进度指示器

默认情况下，浏览器会在状态栏中显示上传进度。但是，我们也可以自定义上传进度指示器来更好地与我们的网页设计相匹配。

我们可以使用HTML的进度条元素<progress>来实现自定义的上传进度指示器。下面是一个使用进度条元素的示例：

<progress id="uploadProgress" value="0" max="100"></progress>

在JavaScript中，我们可以使用DOM API来更新进度条元素的值。下面是一个使用Fetch API和进度条元素来实现上传进度指示器的示例：

const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

const progressElement = document.getElementById('uploadProgress');

fetch('/upload', {
  method: 'POST',
  body: formData,
  upload: (progressEvent) => {
    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    progressElement.value = progress;
  }
})
.then(response => response.json())
.then(data => {
  console.log('上传成功:', data);
})
.catch(error => {
  console.error('上传失败:', error);
});