学习PHP中运用Session配合Javascript实现文件上传进度条功能-百分百源码网

学习PHP中运用Session配合Javascript实现文件上传进度条功能

发布时间：09/01 来源：未知浏览：关键词：

Web利用中常需要供给文件上传的功效。典型的场景包罗会员头像上传、相册图片上传等。当需要上传的文件比力大的时候，供给一个显示上传进度的进度条就很有必要了。

在PHP 5.4之前，实现这样的进度条并不容易，主要有三种办法:

使用Flash, Java, ActiveX
使用PHP的APC扩展
使用HTML5的File API

相关学习引荐：PHP编程从入门到熟知

第一种办法依靠第三方的阅读器插件，通用性不足，且易带来平安隐患。不外由于Flash的使用比力广泛，因此还是有许多网站使用Flash作为解决方案。

第二种办法的不足在于，它需要安置PHP的APC扩展库，要求会员能够操纵效劳器端的配置。别的，假如安置APC仅仅是为了实现一个上传进度条，那么明显有点杀鸡用牛刀的意思。

第三种办法应当是最为抱负的办法，不需要效劳器端的支撑，仅在阅读器端使用Javascript即可。但是由于HTML5标准尚未确立，各阅读器厂商的支撑也不雷同，所以临时这种办法还难以普及。

PHP 5.4中引入的基于session的上传进度监视功效(session.upload_progress)，它供给了一个效劳器端的上传进度监视解决方案。升级到PHP 5.4之后，可以不必安置APC扩展，仅使用原生PHP和前端的Javascript即可实现上传进度条。

下面我们就具体介绍一下 PHP 5.4 的这个 session.upload_progress 新特性。

道理介绍

当阅读器向效劳器端上传一个文件时，PHP将会把此次文件上传的具体信息(如上传时间、上传进度等)储备在session傍边。然后，随着上传的停止，周期性的更新session中的信息。这样，阅读器端就可以使用Ajax周期性的恳求一个效劳器端足本，由该足本返回session中的进度信息；阅读器端的Javascript即可按照这些信息显示/更新进度条了。

那么，文件上传信息详细是怎样储备的？我们要怎样拜访它呢？下面我们来具体说明。

PHP 5.4 中引入了一些配置项(在php.ini中停止设定)

代码如下:

session.upload_progress.enabled = "1"
session.upload_progress.cleanup = "1"
session.upload_progress.prefix = "upload_progress_"
session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"
session.upload_progress.freq = "1%"
session.upload_progress.min_freq = "1"

其中enabled操纵upload_progress功效的开启与否，默许开启；cleanup 则设定当文件上传的恳求提交完成后，可否清除session的相关信息，默许开启。

prefix 和 name 两项用来设定进度信息在session中储备的变量名/键名。关于这两项的具体使用见下文。

freq 和 min_freq 两项用来设定效劳器端对进度信息的更新频率。合理的设定这两项可以减轻效劳器的肩负。

在上传文件的表单中，需要为该次上传设定一个标识符，并在接下来的历程中使用该标识符来援用进度信息。详细的，在上传表单中需要有一个潜藏的input，它的name属性为php.ini中 session.upload_progress.name 的值；它的值为一个由你本人定义的标识符。如下：

代码如下:

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

接到文件上传的表单后，PHP会在$_SESSION变量中创建键，键名是一个将session.upload_progress.prefix的值与上面你自定义的标识符连接后得到的字符串，可以这样得到：

代码如下:

$name = ini_get('session.upload_progress.name');
$key = ini_get('session.upload_progress.prefix') . $_POST[$name];
$_SESSION[$key]; // 这里就是此次文件上传的进度信息了

$_SESSION[$key]这个变量的构造是这样的：

代码如下:

$_SESSION["upload_progress_test"] = array(
 "start_time" => 1234567890,   // 开端时间
 "content_length" => 57343257, // POST恳求的总数据长度
 "bytes_processed" => 453489,  // 已收到的数据长度
 "done" => false,              // 恳求可否完成 true表示完成，false未完成
 // 单个文件的信息
 "files" => array(
  0 => array( ... ),
  // 统一恳求中可包括多个文件
  1 => array( ... ),
 )
);

这样，我们就可以使用其中的 content_length 和 bytes_processed 两项来得到进度百分比。

程序示例

道理介绍完了，下面我们来完全的实现一个基于PHP和Javascript的文件上传进度条。

上传表单

第一，来编写我们的上传表单页面 index.php，代码如下：

代码如下:

<form id="upload-form"
    action="upload.php" method="POST" enctype="multipart/form-data"
    style="margin:15px 0" target="hidden_iframe">
        <input type="hidden" name="" value="test" />
        <p><input type="file" name="file1" /></p> 
        <p><input type="submit" value="Upload" /></p>
</form>    
<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank" style="display:none;"></iframe>
<p id="progress" class="progress" style="margin-bottom:15px;display:none;">
        <p class="bar" style="width:0%;"></p>
        <p class="label">0%</p>
</p>

留意表单中的session.upload_progress.name潜藏项，值设定为了test。表单中仅有一个文件上传input，假如需要，你可以增加多个。

这里需要特殊留意一下表单的target属性，这里设定指向了一个当前页面中的iframe。这一点很关键，通过设定target属性，让表单提交后的页面显示在iframe中，从而幸免当前的页面跳转。由于我们还得在当前页面显示进度条呢。

#progress 这个p是用来显示进度条的。

留意别忘了在index.php的最开端加上session_start()。

处置上传的文件

表单的action指向upload.php，我们在upload.php中处置上传的文件，将它转存到当前名目。这里与平常状况下的上传处置没有不同。

代码如下:

if(is_uploaded_file($_FILES['file1']['tmp_name'])){
        move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}");
}
?>

Ajax猎取进度信息

这一步是关键，我们需要创立一个 progress.php 文件，用来读取session中的进度信息; 然后我们在 index.php 中增添Javascript代码，向 progress.php 发起Ajax恳求，然后按照获得的进度信息更新进度条。

progress.php 的代码如下：

代码如下:

session_start();
$i = ini_get('session.upload_progress.name');
$key = ini_get("session.upload_progress.prefix") . $_GET[$i];
if (!empty($_SESSION[$key])) {
        $current = $_SESSION[$key]["bytes_processed"];
        $total = $_SESSION[$key]["content_length"];
        echo $current < $total ? ceil($current / $total * 100) : 100;
}else{
        echo 100;
}
?>

在这里我们获得$_SESSION变量中的进度信息，然后输出一个进度百分比。

在 index.php 中，我们将如下代码增加到页面底部 (为简捷，这里使用jQuery):

代码如下:

function fetch_progress(){
        $.get('progress.php',{ '' : 'test'}, function(data){
                var progress = parseInt(data);
                $('#progress .label').html(progress + '%');
                $('#progress .bar').css('width', progress + '%');
                if(progress < 100){
                        setTimeout('fetch_progress()', 100);
                }else{
            $('#progress .label').html('完成!');
        }
        }, 'html');
}
$('#upload-form').submit(function(){
        $('#progress').show();
        setTimeout('fetch_progress()', 100);
});

当#upload-form被提交时，我们把进度条显示出来，然后重复调取 fetch_progress() 获得进度信息，并更新进度条，直到文件上传完毕，显示'完成!'。

留意事项

input标签的位置

name为session.upload_progress.name的input标签必然要放在文件input <input type="file" /> 的前面。

取消上传

通过设定 $_SESSION[$key]['cancel_upload'] = true 可取消当次上传。但仅能取消正在上传的文件和尚未开端的文件。已经上传成功的文件不会被删除。

setTimeout vs. setInterval

应当通过 setTimeout() 来调取 fetch_progress()，这样可以确保一次恳求返回之后才开端下一次恳求。假如使用 setInterval() 则不克不及包管这一点，有大概致使进度条显现'不进反退'。

以上就是学习PHP中使用Session配合Javascript实现文件上传进度条功效的具体内容，更多请关注百分百源码网其它相关文章！

打赏