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


Posted in PHP onOctober 15, 2014

Web应用中常需要提供文件上传的功能。典型的场景包括用户头像上传、相册图片上传等。当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了。

在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法:

1.使用Flash, Java, ActiveX
2.使用PHP的APC扩展
3.使用HTML5的File API

第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患。不过由于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>
<div id="progress" class="progress" style="margin-bottom:15px;display:none;">

        <div class="bar" style="width:0%;"></div>

        <div class="label">0%</div>

</div>

注意表单中的session.upload_progress.name隐藏项,值设置为了test。表单中仅有一个文件上传input,如果需要,你可以添加多个。

这里需要特别注意一下表单的target属性,这里设置指向了一个当前页面中的iframe。这一点很关键,通过设置target属性,让表单提交后的页面显示在iframe中,从而避免当前的页面跳转。因为我们还得在当前页面显示进度条呢。

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

注意 别忘了在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() 获得进度信息,并更新进度条,直到文件上传完毕,显示'完成!'。

Done!

完整代码下载:http://xiazai.3water.com/201410/tools/samples-master.rar

注意事项

input标签的位置

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

取消上传

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

setTimeout vs. setInterval

应该通过 setTimeout() 来调用 fetch_progress(),这样可以确保一次请求返回之后才开始下一次请求。如果使用 setInterval() 则不能保证这一点,有可能导致进度条出现'不进反退'。

PHP 相关文章推荐
实现树状结构的两种方法
Oct 09 PHP
一个SQL管理员的web接口
Oct 09 PHP
上传多个文件的PHP脚本
Nov 26 PHP
php zlib压缩和解压缩swf文件的代码
Dec 30 PHP
在PHP中养成7个面向对象的好习惯
Jan 28 PHP
php 高效率写法 推荐
Feb 21 PHP
PHP测试成功的邮件发送案例
Oct 26 PHP
PHP实现生成模糊图片的方法示例
Dec 21 PHP
PHP基于redis计数器类定义与用法示例
Feb 08 PHP
php微信支付之公众号支付功能
May 30 PHP
PHP堆栈调试操作简单示例
Jun 15 PHP
thinkphp5使用无限极分类
Feb 18 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
Oct 15 #PHP
PHP实现文件下载断点续传详解
Oct 15 #PHP
PHP多进程编程实例
Oct 15 #PHP
PHP实现采集中国天气网未来7天天气
Oct 15 #PHP
跟我学Laravel之视图 &amp; Response
Oct 15 #PHP
跟我学Laravel之请求与输入
Oct 15 #PHP
跟我学Laravel之路由
Oct 15 #PHP
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
express.js中间件说明详解
2019/03/19 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
pandas 数据实现行间计算的方法
2018/06/08 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
Python 没有main函数的原因
2020/07/10 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
写给女生的道歉信
2014/01/14 职场文书
化妆品活动策划方案
2014/05/23 职场文书
导航工程专业自荐信
2014/09/02 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers