PHP Ajax上传进度条

<form enctype="multipart/form-data" action="upload.php" method="POST">
<input name="uploaded" type="file" />
<input type="submit" value="Upload" />
</form>

<?php
if(isset($_REQUEST['submit'])){
   $target = "data/".basename( $_FILES['uploaded']['name']) ;
   move_uploaded_file($_FILES['uploaded']['tmp_name'], $target);
}
?>

我非常了解 Javascript、AJAX 和 JQuery 等，并且我相信可以使用 PHP、AJAX 和 Javascript 等创建上传进度条。

我很惊讶如何在上传过程中获取上传文件的大小（意味着每一秒我都想知道，上传了多少文件以及剩余多少文件，我认为应该可以使用 AJAX 等）文件。

这是 PHP 手册的链接，但我不明白：http://php.net/manual/en/session.upload-progress.php http://php.net/manual/en/session.upload-progress.php

有没有其他方法可以使用 PHP 和 AJAX 显示上传进度条，但不使用任何 PHP 外部扩展？我无权访问php.ini

介绍

PHP 文档非常详细，它说

当上传正在进行时，以及当 POST 与 session.upload_progress.name INI 设置设置为相同名称的变量时，上传进度将在 $_SESSION 超全局中可用。当 PHP 检测到此类 POST 请求时，它将在 $_SESSION 中填充一个数组，其中索引是 session.upload_progress.prefix 和 session.upload_progress.name INI 选项的串联值。通常通过读取这些 INI 设置来检索密钥，即

您需要的所有信息都已在 PHP 会话命名中准备就绪

• 开始时间
• 内容长度
• 已处理字节数
• 文件信息（支持多个）

您所需要的只是提取此信息并将其显示在 HTML 表单中。

基本示例

a.html

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
    var intval = null;
    var percentage = 0 ;
    function startMonitor() {
        $.getJSON('b.php',
        function (data) {
            if (data) {
                percentage = Math.round((data.bytes_processed / data.content_length) * 100);
                $("#progressbar").progressbar({value: percentage});
                $('#progress-txt').html('Uploading ' + percentage + '%');

            }
            if(!data || percentage == 100){
                $('#progress-txt').html('Complete');
                stopInterval();
            }
        });
    }

    function startInterval() {
        if (intval == null) {
            intval = window.setInterval(function () {startMonitor()}, 200)
        } else {
            stopInterval()
        }
    }

    function stopInterval() {
        if (intval != null) {
            window.clearInterval(intval)
            intval = null;
            $("#progressbar").hide();
            $('#progress-txt').html('Complete');
        }
    }

    startInterval();
</script>

b.php

session_start();
header('Content-type: application/json');
echo json_encode($_SESSION["upload_progress_upload"]);

PHP 会话上传进度示例

这是一个更好的优化版本PHP 会话上传进度 https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-Session-Upload-Progress

JavaScript

$('#fileupload').bind('fileuploadsend', function (e, data) {
    // This feature is only useful for browsers which rely on the iframe transport:
    if (data.dataType.substr(0, 6) === 'iframe') {
        // Set PHP's session.upload_progress.name value:
        var progressObj = {
            name: 'PHP_SESSION_UPLOAD_PROGRESS',
            value: (new Date()).getTime()  // pseudo unique ID
        };
        data.formData.push(progressObj);
        // Start the progress polling:
        data.context.data('interval', setInterval(function () {
            $.get('progress.php', $.param([progressObj]), function (result) {
                // Trigger a fileupload progress event,
                // using the result as progress data:
                e = document.createEvent('Event');
                e.initEvent('progress', false, true);
                $.extend(e, result);
                $('#fileupload').data('fileupload')._onProgress(e, data);
            }, 'json');
        }, 1000)); // poll every second
    }
}).bind('fileuploadalways', function (e, data) {
    clearInterval(data.context.data('interval'));
});

进度.php

$s = $_SESSION['upload_progress_'.intval($_GET['PHP_SESSION_UPLOAD_PROGRESS'])];
$progress = array(
        'lengthComputable' => true,
        'loaded' => $s['bytes_processed'],
        'total' => $s['content_length']
);
echo json_encode($progress);

其他例子

• 使用 PHP 和 JavaScript 跟踪上传进度 http://phpmaster.com/tracking-upload-progress-with-php-and-javascript/
• PHP-5.4-上传进度示例 https://github.com/chemicaloliver/PHP-5.4-Upload-Progress-Example