当前位置：首页 > PHP

php实现上传进度条

2026-04-03 01:35:13PHP

php实现上传进度条

PHP 实现上传进度条的方法

使用 `session.upload_progress` 特性

PHP 5.4+ 内置了文件上传进度跟踪功能，通过 session.upload_progress 实现。

php实现上传进度条

在 php.ini 中启用配置：

session.upload_progress.enabled = On
session.upload_progress.cleanup = Off  # 调试时可关闭自动清理

前端表单需包含隐藏字段：

<input type="hidden" name="<?php echo ini_get('session.upload_progress.name'); ?>" value="file_upload" />

后端通过 AJAX 轮询进度：

session_start();
$key = ini_get('session.upload_progress.prefix') . $_GET['progress_key'];
$progress = $_SESSION[$key] ?? null;
echo json_encode($progress);

使用 JavaScript + AJAX 轮询

前端通过 FormData 和 XMLHttpRequest 分块上传：

let xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
  let percent = Math.round((e.loaded / e.total) * 100);
  document.getElementById('progress-bar').style.width = percent + '%';
});
xhr.open('POST', 'upload.php', true);
xhr.send(formData);

使用第三方库（如 Dropzone.js）

Dropzone.js 提供现成的上传进度 UI：

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/dropzone.css" />
<script src="https://unpkg.com/dropzone@5/dist/dropzone.js"></script>

<form action="/upload" class="dropzone">
  <div class="dz-message">拖放文件到此处上传</div>
</form>

注意事项

大文件需调整 php.ini 的 upload_max_filesize 和 post_max_size。
进度信息存储在 $_SESSION 中，确保会话已启动。
生产环境建议清理旧的进度数据以避免内存占用。

完整示例代码

// upload.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    echo 'Upload complete';
}

<!-- index.html -->
<div id="progress" style="width:100%;background:#ddd">
  <div id="progress-bar" style="height:20px;width:0%;background:#4CAF50"></div>
</div>

<script>
  document.querySelector('input[type="file"]').addEventListener('change', function(e) {
    let formData = new FormData();
    formData.append('file', e.target.files[0]);

    let xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function(e) {
      if (e.lengthComputable) {
        let percent = (e.loaded / e.total) * 100;
        document.getElementById('progress-bar').style.width = percent + '%';
      }
    };
    xhr.open('POST', 'upload.php', true);
    xhr.send(formData);
  });
</script>