PHP利用Session实现上传进度

实现文件上传进度条基本是依靠JS插件或HTML5的File API来完成，其实PHP配合ajax也能实现此功能。

PHP手册对于session上传进度是这么介绍的：

当 session.upload_progress.enabled INI 选项开启时，PHP 能够在每一个文件上传时监测上传进度。 这个信息对上传请求自身并没有什么帮助，但在文件上传时应用可以发送一个POST请求到终端（例如通过XHR）来检查这个状态 

当一个上传在处理中，同时POST一个与INI中设置的session.upload_progress.name同名变量时，上传进度可以在$_SESSION中获得。 当PHP检测到这种POST请求时，它会在$_SESSION中添加一组数据, 索引是 session.upload_progress.prefix 与 session.upload_progress.name连接在一起的值。 通常这些键值可以通过读取INI设置来获得，例如 

<?php

$key = ini_get("session.upload_progress.prefix") . ini_get("session.upload-progress.name");

var_dump($_SESSION[$key]);

?>  

通过将$_SESSION[$key]["cancel_upload"]设置为TRUE，还可以取消一个正在处理中的文件上传。 当在同一个请求中上传多个文件，它仅会取消当前正在处理的文件上传和未处理的文件上传，但是不会移除那些已经完成的上传。 当一个上传请求被这么取消时，$_FILES中的error将会被设置为 UPLOAD_ERR_EXTENSION。 

session.upload_progress.freq 和 session.upload_progress.min_freq INI选项控制了上传进度信息应该多久被重新计算一次。 通过合理设置这两个选项的值，这个功能的开销几乎可以忽略不计。 

注意：为了使这个正常工作，web服务器的请求缓冲区需要禁用，否则 PHP可能仅当文件完全上传完成时才能收到文件上传请求。 已知会缓冲这种大请求的程序有Nginx。

下面原理介绍：
　　当浏览器向服务器端上传一个文件时，PHP将会把此次文件上传的详细信息(如上传时间、上传进度等)存储在session当中。然后，随着上传的进行，周期性的更新session中的信息。这样，浏览器端就可以使用Ajax周期性的请求一个服务器端脚本，由该脚本返回session中的进度信息；浏览器端的Javascript即可根据这些信息显示/更新进度条了。

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的相关信息，默认开启，如果需要调试$_SESSION，则应该设为Off。
　　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]这个变量的结构是这样的：

array (

	'upload_progress_test' => array (

		'start_time' => 1491494993,   // 开始时间

		'content_length' => 1410397,  // POST请求的总数据长度

		'bytes_processed' => 1410397, // 已收到的数据长度

		'done' => true,               // 请求是否完成 true表示完成，false未完成

		'files' => array (

			0 => array (

				'field_name' => 'file1',

				'name' => 'test.jpg',

				'tmp_name' => 'D:\\wamp\\tmp\\phpE181.tmp',

				'error' => 0,

				'done' => true,

				'start_time' => 1491494993,

				'bytes_processed' => 1410096,

			),

		),

	),

);

这样，我们就可以使用其中的 content_length 和 bytes_processed 两项来得到进度百分比。
原理介绍完了，下面我们来完整的实现一个基于PHP和Javascript的文件上传进度条。

上传表单index.php

<?php session_start(); ?>

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>PHP(5.4) Session 上传进度 Demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="keywords" content=""/>

    <meta name="description" content=""/>

    <meta name="author" content="">

    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">

        body{

            font-size:1em;

            color:#333;

            font-family: "宋体", Arial, sans-serif;

        }

        h1, h2, h3, h4, h5, h6{

            font-family: "宋体", Georgia, serif;

            color:#000;

            line-height:1.8em;

            margin:0;

        }

        h1{ font-size:1.8em; }

        #wrap{

            margin-top:15px;

            margin-bottom:50px;

            background:#fff;

            border-radius:5px;

            box-shadow:inset 0 0 3px #000,

            0 0 3px #eee;

        }

        #header{

            border-radius:5px 5px 0 0;

            box-shadow:inset 0 0 3px #000;

            padding:0 15px;

            color:#fff;

            background: #333333;

        }

        #header h1{

            color:#fff;

        }

        #article{

            padding:0 15px;

        }

        #footer{

            text-align:center;

            border-top:1px solid #ccc;

            border-radius:0 0 5px 5px;

        }

        .progress {

            width: 100%;

            border: 1px solid #4da8fe;

            border-radius: 40px;

            height: 20px;

            position: relative;

        }

        .progress .labels {

            position: relative;

            text-align: center;

        }

        .progress .bar {

            position: absolute;

            left: 0;

            top: 0;

            background: #4D90FE;

            height: 20px;

            line-height:20px;

            border-radius: 40px;

            min-width: 20px;

        }

        .report-file {

            display: block;

            position: relative;

            width: 120px;

            height: 28px;

            overflow: hidden;

            border: 1px solid #428bca;

            background: none repeat scroll 0 0 #428bca;

            color: #fff;

            cursor: pointer;

            text-align: center;

            float: left;

            margin-right:5px;

        }

        .report-file span {

            cursor: pointer;

            display: block;

            line-height: 28px;

        }

        .file-prew {

            cursor: pointer;

            position: absolute;

            top: 0;

            left:0;

            width: 120px;

            height: 30px;

            font-size: 100px;

            opacity: 0;

            filter: alpha(opacity=0);

        }

        .container{

            padding-left:0;

            padding-right:0;

            margin:0 auto;

        }

    </style>

</head>

<body>

<div id="wrap" class="container">

    <div id="header">

        <h1>Session上传进度 Demo</h1>

    </div>

    <div id="article">

        <form id="upload-form" action="upload.php" method="POST" enctype="multipart/form-data" style="margin:15px 0"

              target="hidden_iframe">

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

            <div class="report-file">

                <span>上传文件…</span><input tabindex="3" size="3" name="file1" class="file-prew" type="file" onchange="document.getElementById('textName').value=this.value">

            </div>

            <input type="text" id="textName" style="height: 28px;border:1px solid #f1f1f1" />

            <p>

                <input type="submit" class="btn btn-default" value="上传"/>

            </p>

        </form>

        <div id="progress" class="progress" style="margin-bottom:15px;display:none;">

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

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

        </div>

    </div> <!-- #article -->

    <div id="footer">

        <p> </p>

    </div>

</div><!-- #wrap -->

<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank" style="display:none;"></iframe>

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">

    function fetch_progress() {

        $.get('progress.php', {'<?php echo ini_get("session.upload_progress.name"); ?>': 'test'}, function (data) {

            var progress = parseInt(data);

            $('#progress .labels').html(progress + '%');

            $('#progress .bar').css('width', progress + '%');

            if (progress < 100) {

                setTimeout('fetch_progress()', 500);

            } else {

                $('#progress .labels').html('100%');

            }

        }, 'html');

    }

    $('#upload-form').submit(function () {

        $('#progress').show();

        //图片比较小，看不出进度条加载效果，初始设33%

        $('#progress .labels').html('33%');

        $('#progress .bar').css('width', '33%');

        setTimeout('fetch_progress()', 500);

    });

</script>

</body>

</html>

　　注意表单中的session.upload_progress.name隐藏项，值设置为了test。表单中仅有一个文件上传input，如果需要，你可以添加多个。
　　这里需要特别注意一下表单的target属性，这里设置指向了一个当前页面中的iframe。这一点很关键，通过设置target属性，让表单提交后的页面显示在iframe中，从而避免当前的页面跳转。因为我们还得在当前页面显示进度条呢。

上传文件upload.php

<?php

/**

 * 上传文件

 */

if(is_uploaded_file($_FILES['file1']['tmp_name'])){

	//unlink($_FILES['file1']['tmp_name']);

	$fileName = 'pic_' . date('YmdHis') . mt_rand(10000,99999);

	$ext = substr($_FILES['file1']['name'], strrpos($_FILES['file1']['name'], '.'));

	move_uploaded_file($_FILES['file1']['tmp_name'], $fileName . $ext);

}

ajax获取上传进度progress.php

<?php

/**

 * AJAX获取上传文件进度

 */

session_start();

$i = ini_get('session.upload_progress.name');

//session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"

$key = ini_get("session.upload_progress.prefix") . $_GET[$i];

//session.upload_progress.prefix = "upload_progress_" . 'test'

if (!empty($_SESSION[$key])) {

	$current = $_SESSION[$key]["bytes_processed"]; // 已收到的数据长度

	$total   = $_SESSION[$key]["content_length"];  // POST请求的总数据长度

	echo $current < $total ? ceil($current / $total * 100) : 100;

}else{

	echo 100;

}

注意事项:
1.input标签的位置name为session.upload_progress.name的input标签一定要放在文件input <input type="file" /> 的前面。
2.通过设置 $_SESSION[$key]['cancel_upload'] = true 可取消当次上传。但仅能取消正在上传的文件和尚未开始的文件。已经上传成功的文件不会被删除。
3.应该通过 setTimeout() 来调用 fetch_progress()，这样可以确保一次请求返回之后才开始下一次请求。如果使用 setInterval() 则不能保证这一点，有可能导致进度条出现'不进反退'。

PHP利用Session实现上传进度的更多相关文章

PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
利用Bootstrap简单实现一个文件上传进度条
© 版权声明:本文为博主原创文章,转载请注明出处说明: 1. 使用commons-fileupload.jar实现文件上传及进度监听 2. 使用bootstrap的进度条进行页面显示 3. 因为进度 ...
CTF Jarvisoj Web(session.upload_progress.name php 上传进度)
Jarvisoj Web 题目地址:http://web.jarvisoj.com:32784/index.php <?php //A webshell is wait for you ini_ ...
Web---文件上传-用apache的工具处理、打散目录、简单文件上传进度
我们需要先准备好2个apache的类: 上一个博客文章只讲了最简单的入门,现在来开始慢慢加深. 先过渡一下:只上传一个file项 index.jsp: <h2>用apache的工具处理文件 ...
利用WebRequest类上传文件
说明:1.WebRequest类是一个抽象类,所以上传类实际使用的是其子类 2.打开Fiddler软件,监视正常网页的文件上传,可以看到http协议的请求和响应信息,简略说明 (第一行:请求说明 PO ...
Node.js：上传文件，服务端如何获取文件上传进度
内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...
SpringMVC 监听文件上传进度
Spring MVC 监听文件上传进度具体实现分三个步骤: 接管CommonsMultipartResolver,重写针对文件上传的请求. 在第一步中写入监听,以获取上传进度. 修改上传部分的配置文 ...
.NetCore多文件上传进度的示例
主要讲的内容有: 1-----form方式上传一组图片 2-----ajax上传一组图片 3-----ajax提交+上传进度+一组图片上传 4-----Task并行处理+ajax提交+上传进度+一组图 ...
layui文件上传进度条（模拟）
1.修改上传组件js(没测) https://blog.csdn.net/weixin_42457316/article/details/81017471 https://www.cnblogs.co ...

随机推荐

为laravel队列安装supervisor并配置
supervisor 是用 Python 开发的进程管理程序;python 在主流的 linux 发行版都已经内置了:pip 则是 python 的一个包管理工具:跟 php 的 composer 类 ...
vue.js插值，插入图片，属性
<html><head><title>Insert title here</title><script type="text/javas ...
HDU-1260.Tickets(简单线性DP)
本题大意:排队排票,每个人只能自己单独购买或者和后面的人一起购买,给出k个人单独购买和合买所花费的时间,让你计算出k个人总共花费的时间,然后再稍作处理就可得到答案,具体格式看题意. 本题思路:简单dp ...
167. Two Sum II - Input array is sorted (Array)
Given an array of integers that is already sorted in ascending order, find two numbers such that the ...
mysql 报错You can't specify target table 'wms_cabinet_form' for update in FROM clause
这个错误是说从t表select出来的无法又更新t表. 可以在select的时候先取个别名,弄个临时表即可.
149. Max Points on a Line同一条线上的最多点数
［抄题］: Given n points on a 2D plane, find the maximum number of points that lie on the same straight ...
java重写equals方法需要注意的几点
为什么equals()方法要重写? 判断两个对象在逻辑上是否相等,如根据类的成员变量来判断两个类的实例是否相等,而继承Object中的equals方法只能判断两个引用变量是否是同一个对象.这样我们往往 ...
linux ">/dev/null 2>&1 &"
0:表示键盘输入(stdin)1:表示标准输出(stdout),系统默认是1 2:表示错误输出(stderr) command >/dev/null 2>&1 & == ...
HDU 3594.Cactus 仙人掌图
Cactus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
分布式协议学习笔记(一) Raft 选举
Raft官网官方可视化动画1 官方可视化动画2 论文中文翻译论文英文地址感觉作为paxos的升级精简版 Raft在设计之初就以容易理解为目标看完资料脑海里都有了大概的轮廓. 有了这些详细的资 ...

PHP利用Session实现上传进度

PHP利用Session实现上传进度的更多相关文章

随机推荐

热门专题