当前位置:首页 > PHP

php 实现上传进度

2026-02-16 13:33:34PHP

PHP 实现上传进度的方法

使用 session.upload_progress 功能

PHP 提供了一个内置功能 session.upload_progress,可以在文件上传时跟踪进度。需要在 php.ini 中启用以下配置:

session.upload_progress.enabled = On
session.upload_progress.cleanup = On
session.upload_progress.prefix = "upload_progress_"
session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"

创建一个包含文件上传表单的 HTML 页面,表单中必须包含一个隐藏字段,其名称与 session.upload_progress.name 配置的值相同:

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="<?php echo ini_get('session.upload_progress.name'); ?>" value="file_upload" />
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
</form>

在另一个脚本中(如 AJAX 请求),可以通过检查 $_SESSION 来获取上传进度:

php 实现上传进度

session_start();
$key = ini_get('session.upload_progress.prefix') . 'file_upload';
if (isset($_SESSION[$key])) {
    $progress = $_SESSION[$key];
    $percentage = ($progress['bytes_processed'] / $progress['content_length']) * 100;
    echo json_encode(['progress' => $percentage]);
}

使用 AJAX 轮询进度

前端可以通过 AJAX 定期轮询服务器以获取上传进度。以下是示例代码:

function checkProgress() {
    $.get('progress.php', function(data) {
        if (data.progress < 100) {
            setTimeout(checkProgress, 500); // 每 0.5 秒检查一次
        }
        $('#progress-bar').width(data.progress + '%');
    });
}

使用第三方库

对于更复杂的上传进度跟踪,可以考虑使用第三方库,如 pluploadDropzone.js。这些库提供了更丰富的上传进度显示功能,并且支持分块上传。

php 实现上传进度

var uploader = new plupload.Uploader({
    browse_button: 'browse-button',
    url: 'upload.php'
});

uploader.init();
uploader.bind('UploadProgress', function(up, file) {
    console.log(file.percent + '% uploaded');
});

使用 uploadprogress PECL 扩展

安装 uploadprogress 扩展后,可以使用其提供的函数跟踪上传进度:

if (function_exists('uploadprogress_get_info')) {
    $info = uploadprogress_get_info($_POST['upload_id']);
    $percentage = ($info['bytes_uploaded'] / $info['bytes_total']) * 100;
    echo $percentage;
}

确保在表单中包含一个唯一的 upload_id

<input type="hidden" name="UPLOAD_IDENTIFIER" value="<?php echo uniqid(); ?>" />

以上方法可以根据具体需求选择适合的方案来实现文件上传进度跟踪。

标签: 进度上传
分享给朋友:

相关文章

vue实现视频上传管理

vue实现视频上传管理

视频上传管理实现方案 前端部分(Vue.js) 使用<input type="file">元素配合<video>标签实现基础上传和预览功能: <template>…

vue 实现上传视频

vue 实现上传视频

使用 Vue 实现上传视频功能 在 Vue 中实现上传视频功能,通常需要结合 HTML 的 <input type="file"> 元素和 Vue 的事件处理。以下是具体实现方法: 基本…

vue实现上传进度

vue实现上传进度

Vue 实现文件上传进度 在 Vue 中实现文件上传进度可以通过 XMLHttpRequest 或 axios 的 onUploadProgress 事件来监听上传进度。以下是两种常见实现方式: 使…

vue实现上传封面

vue实现上传封面

Vue 实现上传封面功能 使用原生 input 文件上传 在 Vue 中可以通过原生 HTML 的 input 元素实现文件上传功能。创建一个文件输入框,监听 change 事件获取用户选择的文件。…

Vue实现图片批量上传

Vue实现图片批量上传

Vue 图片批量上传实现方法 准备工作 安装必要依赖(如axios、element-ui等),确保项目基于Vue 2/3环境。以Vue 3 + Element Plus为例: npm install…

vue实现上传预览功能

vue实现上传预览功能

Vue实现上传预览功能 基本文件上传组件 使用<input type="file">获取文件,通过FileReader读取文件内容: <template> <div…