在HTML5中，利用XMLHttpRequest Level 2（XHR2）和FormData对象，我们可以实现文件的异步上传，并且在上传过程中实时显示进度。这个功能对于提高用户体验非常有帮助，特别是处理大文件上传时。以下是一个详细的解释和示例。
HTML部分包含一个表单，用户可以选择一个文件并提交。一个`<div>`用于显示上传进度：
```html
<form method="post" id="myForm">
<input type="file" name="file" id="upfile" />
<input type="submit" name="submit" value="提交" />
</form>
<div id="upStatus"></div>
```
JavaScript部分是关键，它处理文件选择、创建FormData对象、初始化XMLHttpRequest对象以及处理上传过程中的进度事件：
```javascript
var myForm = document.getElementById("myForm");
var upfile = document.getElementById("upfile");
myForm.onsubmit = function() {
var fd = new FormData();
var file = upfile.files[0];
fd.append("file", file);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
alert(this.responseText);
}
};
xhr.open("post", "upfile.php", true);
xhr.upload.onprogress = function(ev) {
if (ev.lengthComputable) {
var percent = Math.round((ev.loaded / ev.total) * 100);
document.getElementById("upStatus").innerHTML = percent + "%";
}
};
xhr.send(fd);
return false;
};
```
在这个例子中，当用户提交表单时，`onsubmit`事件处理器被触发。它创建一个FormData对象，将用户选择的文件添加到其中，然后创建一个新的XMLHttpRequest对象。`open()`方法用于配置请求类型、URL和是否异步执行。`upload.onprogress`事件监听器负责处理上传进度，如果`lengthComputable`为真，表明可以计算出总进度，然后计算并更新进度条。
服务器端的PHP代码接收上传的文件并将其保存到指定目录：
```php
<?php
$uploadDir = './upload/';
if (!file_exists($uploadDir)) {
@mkdir($uploadDir, 0777, true);
}
$uploadFile = $uploadDir . basename($_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
echo "OK";
} else {
echo "NO";
}
```
这段代码首先检查上传目录是否存在，如果不存在则创建。然后，使用`move_uploaded_file()`函数将临时文件移动到目标位置。如果成功，返回"OK"，否则返回"NO"。
需要注意的是，如果上传文件大小超过PHP的限制，例如默认的8MB，会收到错误提示。可以通过修改`php.ini`中的`post_max_size`和`upload_max_filesize`配置来增大限制。如果不想修改全局配置，也可以在PHP脚本中使用`ini_set()`函数临时调整这些值：
```php
ini_set('post_max_size', '100M');
ini_set('upload_max_filesize', '100M');
```
以上就是使用PHP和HTML5的XHR2实现文件上传和进度显示的完整流程。这个功能可以帮助用户了解文件上传的状态，提高交互体验。
