AJAX 如何在网页上实现文件上传进度条

在本文中，我们将介绍如何使用AJAX在网页上实现文件上传进度条。

阅读更多：AJAX 教程

什么是AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于在网页上进行数据交互的技术。它通过JavaScript和XML来实现异步的数据传输，可以在不重新加载整个页面的情况下更新部分内容。

文件上传进度条的需求

在网页开发中，文件上传是常见的需求之一。然而，文件上传过程中无法直接获取到上传进度，这给用户带来了不便。为了提升用户体验，我们可以通过AJAX来实现文件上传进度条的显示。

实现步骤

1. 创建文件上传表单

首先，我们需要创建一个文件上传表单。这可以通过HTML的<input type="file">元素实现。

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

2. 编写AJAX代码

接下来，我们使用AJAX来处理文件上传请求。

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单的默认提交行为

  var formData = new FormData(this); // 创建FormData对象，用于存储要上传的文件

  var xhr = new XMLHttpRequest(); // 创建XHR对象

  xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) { // 判断上传进度是否可计算
      var percent = e.loaded / e.total * 100; // 计算上传进度的百分比
      console.log('上传进度：' + percent + '%');
    }
  });

  xhr.open('POST', '/upload', true); // 设置请求方法和URL
  xhr.send(formData); // 发送请求
});

上述代码中，我们使用XMLHttpRequest对象发送文件上传请求，同时通过XHR对象的upload事件监听上传进度。在progress事件中，我们可以计算出当前的上传进度，并进行相应的处理。

3. 后端处理

在服务器端，我们需要相应的后端代码来处理文件上传请求。具体的处理方式根据服务器端的语言和框架而定。

这里以Node.js为例，使用express框架来处理文件上传请求。

const express = require('express');
const app = express();

app.post('/upload', (req, res) => {
  // 在这里处理上传文件的逻辑
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

在真实的应用中，我们需要在服务器端保存上传的文件，并根据需要进行后续的处理。

示例说明

下面是一个完整的示例代码，演示了如何使用AJAX在网页上实现文件上传进度条。

<!DOCTYPE html>
<html>

<head>
  <script>
    document.getElementById('uploadForm').addEventListener('submit', function(e) {
      e.preventDefault();

      var formData = new FormData(this);

      var xhr = new XMLHttpRequest();

      xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
          var percent = e.loaded / e.total * 100;
          console.log('上传进度：' + percent + '%');
        }
      });

      xhr.open('POST', '/upload', true);
      xhr.send(formData);
    });
  </script>
</head>

<body>
  <form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">上传</button>
  </form>
</body>

</html>