一文道尽上传进度监听的多种方式

获取文件上传进度：全面指南

在现代 Web 开发中，文件上传功能是必不可少的。但是，获取上传进度的信息往往是一大难题。本文将深入探讨多种方法，帮助你轻松监听和显示文件上传进度。

一、监听上传进度的必要性

监听上传进度至关重要，因为它可以：

• 让用户了解上传状态，消除焦虑
• 允许动态更新上传进度条，提供视觉反馈
• 识别上传中断或问题，以便采取适当措施

二、获取上传进度的多种方式

有多种方法可以获取文件上传进度，包括：

使用 Axios

const axios = require('axios');

const file = document.getElementById('file');

axios.post('/upload', file, {
  onUploadProgress: (progressEvent) => {
    const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`上传进度：${percentage}%`);
  },
});

使用 Ajax

const xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', (progressEvent) => {
  const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  console.log(`上传进度：${percentage}%`);
});

xhr.open('POST', '/upload');
xhr.send(file);

使用 HTML5

const file = document.getElementById('file');

file.addEventListener('progress', (progressEvent) => {
  const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  console.log(`上传进度：${percentage}%`);
});

const formData = new FormData();
formData.append('file', file);

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

使用 Fetch

const file = document.getElementById('file');

const formData = new FormData();
formData.append('file', file);

fetch('/upload', {
  method: 'POST',
  body: formData,
  onUploadProgress: (progressEvent) => {
    const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`上传进度：${percentage}%`);
  },
});

使用 FormData

const file = document.getElementById('file');

const formData = new FormData();
formData.append('file', file);

const xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', (progressEvent) => {
  const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  console.log(`上传进度：${percentage}%`);
});

xhr.open('POST', '/upload');
xhr.send(formData);

使用 XMLHttpRequest

const file = document.getElementById('file');

const xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', (progressEvent) => {
  const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  console.log(`上传进度：${percentage}%`);
});

xhr.open('POST', '/upload');
xhr.send(file);

使用 Progress 事件

const file = document.getElementById('file');

file.addEventListener('progress', (progressEvent) => {
  const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  console.log(`上传进度：${percentage}%`);
});

使用 Onprogress 事件

const file = document.getElementById('file');

file.onprogress = (progressEvent) => {
  const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  console.log(`上传进度：${percentage}%`);
};

使用 Onload 事件

const file = document.getElementById('file');

file.onload = (progressEvent) => {
  const percentage = 100;
  console.log(`上传进度：${percentage}%`);
};

使用 Onreadystatechange 事件

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const percentage = 100;
    console.log(`上传进度：${percentage}%`);
  }
};

xhr.open('POST', '/upload');
xhr.send(file);

使用 FileReader

const file = document.getElementById('file');

const fileReader = new FileReader();

fileReader.onloadstart = (progressEvent) => {
  console.log('开始上传');
};

fileReader.onprogress = (progressEvent) => {
  const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  console.log(`上传进度：${percentage}%`);
};

fileReader.onloadend = (progressEvent) => {
  console.log('上传完成');
};

fileReader.readAsDataURL(file);

三、选择最合适的方法

选择最合适的方法取决于项目需求和开发环境。以下是一些考虑因素：

• 支持性： 并非所有方法都支持所有浏览器和平台。
• 易用性： 有些方法比其他方法更容易实现。
• 性能： 某些方法比其他方法在处理大型文件时可能更有效率。
• 定制化： 某些方法允许更多的定制，例如动态更新进度条。

四、结论

本文深入介绍了获取文件上传进度的多种方法。这些方法为开发人员提供了多种选择，以根据他们的特定需求和限制实现上传进度监听。通过实施这些技术，你可以轻松地让用户了解上传状态，并为他们提供无缝的文件上传体验。

五、常见问题解答

1. 哪种方法是监听文件上传进度最推荐的方法？

   根据项目需求，推荐使用 Axios 或 Fetch ，因为它们提供了广泛的支持、易用性和强大的功能。

2. 如何处理大文件的上传进度？

   对于大文件，建议使用 XMLHttpRequest ，因为它提供分块上传功能，可以提高性能和可靠性。

3. 上传进度条如何动态更新？

   可以通过使用 Progress 事件或 onprogress 事件来动态更新上传进度条。这些事件提供了上传进度的实时更新，允许你动态调整进度条以反映文件上传进度。

4. 我可以监听多个文件同时上传的进度吗？

   是的，你可以通过使用 XMLHttpRequest 的 multiple 属性或 Fetch 的 FormData 对象来监听多个文件同时上传的进度。

5. 如何确保上传进度的准确性？

   上传进度的准确性取决于网络连接和服务器处理的稳定性。确保使用可靠的网络连接，并优化服务器端代码以快速有效地处理上传文件。