PHP+Ajax如何实现上传文件进度条动态显示进度

1. 简介

在Web开发中，上传文件是常见的需求之一。然而，由于文件大小较大或网络状况不佳，上传过程可能需要较长时间，为了给用户更好的体验，我们可以使用Ajax来实现上传文件进度条，并动态显示上传进度。

2. 实现步骤

2.1 准备工作

首先，我们需要一个服务器端的脚本来接收文件并返回上传进度。这里我们以PHP为例，创建一个名为upload.php的文件，用于处理文件上传。

创建一个HTML页面，包含一个文件选择框和一个进度条，用于上传文件的操作。可以使用如下代码：

<input type="file" id="myFile" name="myFile">

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

2.2 编写JavaScript代码

下一步是编写JavaScript代码，用于处理文件选择和上传过程。我们可以使用Ajax来发送文件数据给服务器端，同时监听上传进度，并将进度更新到进度条上。

首先，我们需要获取文件选择框和进度条的DOM对象。可以使用如下代码：

var fileInput = document.getElementById('myFile');

var progressBar = document.getElementById('progressBar');

接下来，需要编写一个函数来处理文件上传。该函数将通过Ajax发送文件数据给服务器端，并实时更新进度条的值。

function uploadFile() {

  var file = fileInput.files[0]; // 获取文件对象
  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', function(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded / evt.total * 100); // 计算上传进度百分比
      progressBar.value = percentComplete; // 更新进度条值
    }
  }, false);
  xhr.open('POST', 'upload.php', true);
  xhr.send(file); // 发送文件数据
}

2.3 编写服务器端代码

服务器端的代码负责接收文件数据，并返回上传进度。在这里，我们可以使用PHP中的$_FILES来获取上传的文件，$_SERVER['HTTP_X_REQUESTED_WITH']来判断是否为Ajax请求。

$uploadedFile = $_FILES['myFile'];

$progress = round(($_FILES['myFile']['size'] - $_FILES['myFile']['error']))
             / $_FILES['myFile']['size'] * 100;
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && 
    strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  echo $progress; // 返回上传进度
}

3. 运行效果

完成了以上步骤后，我们就可以尝试上传文件并实时显示上传进度了。

选择一个要上传的文件后，点击上传按钮即可开始上传。进度条会根据上传进度实时更新，直至完成。

4. 总结

本文介绍了如何使用PHP和Ajax实现上传文件进度条并动态显示上传进度。通过使用XMLHttpRequest对象，监听上传进度事件，并更新进度条的值，能够让用户清楚地了解文件上传的进度，并提升用户体验。

相比传统的文件上传方式，这种进度条显示的方式更加直观和友好。通过自定义的服务器端代码，我们可以根据自己的需求，对上传进度进行更加灵活的处理。