PHP上传图片是网站开发中常见的需求之一，但是当上传的文件比较大时，用户无法知道上传进度，这时使用进度条就能优化用户体验。
举个例子，比如在网站发布文章时需要上传封面图片，但是因为图片太大，上传速度很慢，用户可能会误以为上传失败而重复上传，这时进度条就很有用。
要实现上传图片进度条，我们可以使用HTML5中的FormData和FileReader对象。在前端页面中，我们需要一个表单来上传文件，并在提交表单时，使用jQuery将文件数据添加到FormData对象中，然后使用XMLHttpRequest对象发送请求。具体实现代码如下：

var formData = new FormData($('#myForm')[0]);
xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
$('#progress').width(percent + '%');
$('#progress-num').html(percent.toFixed(1) + '%');
}
};
xhr.send(formData);

在后台的upload.php文件中，我们可以使用move_uploaded_file函数将上传的文件保存到服务器，并在处理完上传后返回一个状态码。具体实现代码如下：

if (isset($_FILES['file']) && $_FILES['file']['error'] == UPLOAD_ERR_OK) {
$tmp_name = $_FILES['file'] ['tmp_name'];
$name = $_FILES['file'] ['name'];
$target_path = 'uploads/' . $name;
if (move_uploaded_file($tmp_name, $target_path)) {
// 上传成功
echo json_encode(['code' => 0, 'msg' => '上传成功']);
} else {
// 上传失败
echo json_encode(['code' => 1, 'msg' => '上传失败']);
}
}

最后，我们需要在前端页面中添加一个进度条元素，用来显示上传进度。具体实现代码如下：

<div class="progress">
<div id="progress" class="progress-bar progress-bar-striped" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span id="progress-num"></span>
</div>
</div>

通过以上代码实现上传图片进度条，可以有效地提高用户的上传体验。