在PHP和HTML5中，文件上传是Web应用程序中常见的功能，允许用户将本地文件传输到服务器。本篇文章将深入探讨如何实现这一功能，包括使用PHP处理上传，HTML5的无刷新上传以及进度条显示。
PHP作为后端语言，处理文件上传的核心在于`$_FILES`全局数组。当用户通过表单提交文件时，PHP会将文件信息存储在这个数组中，如文件名、类型、大小、临时位置等。例如，以下是一个简单的PHP文件上传脚本`up.php`：
```php
<?php
if(isset($_FILES['myfile']) && $_FILES['myfile']['error'] === UPLOAD_ERR_OK) {
$file = $_FILES['myfile'];
$new_file_name = time() . '_' . $file['name'];
move_uploaded_file($file['tmp_name'], 'uploads/' . $new_file_name);
echo '文件' . $new_file_name . '已成功上传。';
} else {
echo '文件上传失败：' . $_FILES['myfile']['error'];
}
?>
```
此代码检查是否有文件被上传（`isset($_FILES['myfile'])`），然后将文件移动到服务器的`uploads`目录下，并为文件命名以防重名。
HTML5引入了新的API，使得无刷新上传和文件上传进度成为可能。在HTML表单中，可以使用`<input type="file">`元素让用户选择文件，然后通过JavaScript监听`change`事件来开始上传过程。`input.files`属性提供了对选中文件的访问，而`XMLHttpRequest2`的`xhr.upload.progress`事件则用于跟踪上传进度。例如，`upload.php`可以这样实现：
```html
<!DOCTYPE html>
<html>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile">
<button type="button" onclick="startUpload()">上传</button>
</form>
<progress id="progressBar" max="100" value="0"></progress>
<script>
function startUpload() {
var file = document.getElementById('myfile').files[0];
var formData = new FormData();
formData.append('myfile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'up.php', true);
xhr.upload.addEventListener('progress', function(e) {
var percent = (e.loaded / e.total) * 100;
document.getElementById('progressBar').value = Math.round(percent);
}, false);
xhr.onload = function() {
alert(xhr.responseText);
};
xhr.send(formData);
}
</script>
</body>
</html>
```
在这个例子中，当用户点击“上传”按钮时，JavaScript会创建一个`FormData`对象，添加选定的文件，并创建一个新的XMLHttpRequest对象来发送POST请求。`xhr.upload.progress`事件监听器实时更新进度条的值，为用户提供反馈。
总结一下，PHP和HTML5结合使用可以提供高效、用户体验良好的文件上传功能。PHP负责后端的文件接收和存储，而HTML5的API则增强了前端的用户体验，包括无刷新上传和进度条显示。在实际开发中，还需要考虑错误处理、文件类型和大小限制、安全性等问题，以确保文件上传功能的完整性和安全性。
html5up.zip （2个子文件） 
up.php 3KB
upload 
- 1
- 2
前往页