php 使用html5 XHR2实现上传文件与进度显示功能示例

一、介绍

在网页中，上传文件是常见功能，然而，一般情况下上传文件后，用户需要等待页面刷新才能看到上传的结果，这对用户的体验不太友好。使用html5 XHR2来实现上传文件及上传进度显示功能可以很好地解决这个问题。本文将介绍如何使用php和html5 XHR2来实现上传文件及上传进度显示功能。

二、前端实现及代码

首先，我们需要实现一个上传文件的表单，代码如下：

前端实现

  
    选择文件：
    
  
  
  
  
  

这个表单中包含一个文件选择器输入框，一个进度条，以及一个提交按钮。当用户选择了文件并点击提交按钮时，会向服务端发送一个ajax请求。

这个请求的核心就是使用html5 XHR2对象来上传文件，代码如下：

html5 XHR2代码实现

// 获取DOM元素
var form = document.querySelector('form');
var progressBar = document.querySelector('#progressBar');
// 监听上传进度
function updateProgress(event) {
  if (event.lengthComputable) {
    var progress = event.loaded / event.total;
    progressBar.value = progress * 100;
  }
}
// 发送ajax请求
form.addEventListener('submit', function(event) {
  event.preventDefault();
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://example.com/upload.php');
  xhr.onload = function() {
    // 处理响应
  };
  xhr.upload.onprogress = updateProgress;
  var formData = new FormData(form);
  xhr.send(formData);
});

其中，FormData对象可以帮助我们构建表单数据，并且可以包含文件。XHR2的upload对象可以帮助我们监听文件上传进度。

三、后端实现及代码

在服务端，我们需要编写一个php脚本来接收这个请求，并处理上传的文件。代码如下：

后端实现

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  $file = $_FILES['file'];
  move_uploaded_file($file['tmp_name'], '/path/to/upload/dir/' . $file['name']);
  echo '上传成功';
}
?>

其中，$_FILES数组可以获取到上传的文件信息，move_uploaded_file函数可以将文件移动到指定位置。

四、总结

使用html5 XHR2可实现上传文件与上传进度显示功能，可以提高用户体验。在前端，我们使用FormData对象构建表单数据，并使用XHR2对象上传文件。在后端，我们根据$_FILES数组获取上传的文件信息，然后使用move_uploaded_file函数将文件移动到指定位置。