PHP Ajax上传进度栏

PHP Ajax上传进度栏 介绍

它说的PHP文档非常详细

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

PHP会话命名中已准备好您需要的所有信息

• 开始时间
• content_length
• bytes_processed
• 文件信息（支持多个）

您需要提取的信息并以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_enpre($_SESSION["upload_progress_upload"]);

PHP会话上传进度示例

这是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'));});

progress.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_enpre($progress);

其他例子

• 使用PHP和Javascript跟踪上传进度
• PHP-5.4-上传进度示例