当前位置:首页 > 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 来获取上传进度:

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。这些库提供了更丰富的上传进度显示功能,并且支持分块上传。

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

php 实现上传进度

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

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

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

相关文章

h5怎么实现上传视频

h5怎么实现上传视频

使用HTML5实现视频上传 HTML5提供了<input type="file">元素用于文件上传,结合<video>标签可以实现视频上传和预览功能。 <input t…

vue实现环形进度

vue实现环形进度

Vue 实现环形进度条的方法 使用 SVG 和 CSS 实现 在 Vue 中创建一个环形进度条可以通过 SVG 和 CSS 结合实现。以下是一个简单的实现方式: <template>…

vue实现批量上传

vue实现批量上传

Vue 实现批量上传的方法 使用 <input type="file"> 和 multiple 属性 在 Vue 模板中添加一个文件输入框,设置 multiple 属性以允许选择多个文件。…

vue实现上传按钮

vue实现上传按钮

Vue 实现上传按钮的方法 使用原生 HTML input 和 Vue 处理 通过 HTML 的 input 元素结合 Vue 的事件处理实现文件上传功能。 <template> &…

vue实现视频上传

vue实现视频上传

Vue 实现视频上传的方法 使用原生 input 元素和 FormData 在 Vue 中可以通过原生 input 元素结合 FormData 实现视频上传功能。创建一个文件选择输入框,监听文件变化事…

vue实现音乐上传

vue实现音乐上传

Vue 实现音乐上传功能 音乐上传功能通常涉及前端界面交互、文件选择、上传进度显示以及后端接口对接。以下是基于 Vue 的实现方法: 前端界面设计 使用 Vue 的模板语法创建一个简单的上传界面,包…