Ajax文件上传进度条：打造无缝文件传输体验

2023-02-02 10:44:17

用 Ajax 文件上传进度条提升您的文件传输体验

在当今快节奏的互联网世界中，文件上传已成为一项至关重要的功能，无论是共享照片、提交文档还是存储重要数据。但是，传统的上传方法往往缺乏即时反馈，让用户只能盲目等待，不知文件的传输状态。

Ajax 的魔力：实时文件传输进度

为了解决这一痛点，Ajax 技术（Asynchronous JavaScript and XML）横空出世。Ajax 是一种前端框架，利用异步通信技术，允许前端与后端进行交互，而无需重新加载整个页面。借助 Ajax，我们可以创建文件上传进度条，让用户随时掌握文件传输的状态。

Ajax 文件上传进度条的工作原理

Ajax 文件上传进度条的工作原理很简单：

前端使用 XMLHttpRequest 对象发起文件上传请求。
后端收到请求后，开始接收文件并将其存储在服务器上。
同时，后端定期向前端发送文件传输进度信息。
前端收到进度信息后，使用 JavaScript 更新进度条的显示状态。

前端实现：构建您的进度条

实现 Ajax 文件上传进度条需要以下步骤：

<form>
  <input type="file" id="file-input">
  <progress id="progress-bar" value="0" max="100"></progress>
</form>

const fileInput = document.getElementById('file-input');
const progressBar = document.getElementById('progress-bar');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];

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

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.upload.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
      const progress = (e.loaded / e.total) * 100;
      progressBar.value = progress;
    }
  });

  xhr.send(formData);
});

后端处理：与前端协作

在后端，我们需要处理文件上传请求并定期向前端发送进度信息：

<?php
// 接收文件
$file = $_FILES['file'];

// 存储文件
move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);

// 定期发送进度信息
for ($i = 0; $i < 100; $i++) {
  header('Content-Type: text/event-stream');
  header('Cache-Control: no-cache');
  echo "data: " . $i . "\n\n";
  flush();
  sleep(1);
}