这个功能主要是解决大文件上传,提供一个进度条显示的功能。
PHP 5.4中引入的基于session的上传进度监视功能(session.upload_progress),它提供了一个服务器端的上传进度监视解决方案。升级到PHP 5.4之后,可以不必安装APC扩展,仅使用原生PHP和前端的Javascript即可实现上传进度条。
原理:
当浏览器向服务器端上传一个文件时,PHP将会把此次文件上传的详细信息(如上传时间、上传进度等)存储在session当中。然后,随着上传的进行,周期性的更新session中的信息。这样,浏览器端就可以使用Ajax周期性的请求一个服务器端脚本,由该脚本返回session中的进度信息;浏览器端的Javascript即可根据这些信息显示/更新进度条了。
PHP 5.4 中引入了一些配置项(在php.ini中进行设置)
1
2
3
4 5 6 7 8 |
session.upload_progress.enabled = On // 开启upload_progress 功能
session.upload_progress.cleanup = On // 请求提交完成后,是否清除session的相关信息。
session.upload_progress.prefix = "upload_progress_" // 设置进度信息在session中存储的变量名
session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS" // 设置进度信息在session中存储的键名
session.upload_progress.freq = "1%" // 每次返回上传信息的1%
session.upload_progress.min_freq = 1 // 设置多长时间返回一次上传的信息 (秒)
|
| |
修改php上传文件限制:
php.ini默认的上传文件大小上限为2M,然而我们既然需要显示文件上传进度,肯定都是要能够上传比较大的文件。尤其我们在本地服务器上测试的时候,因为服务器保存的路径是在本地磁盘上,所以文件上传就相当于在磁盘上复制,速度很快,我们想要比较直观的看到上传进度的显示,就需要上传一个比较大的文件,我在测试的时候,上传的是一个400多M的压缩包。
可以通过下面的php.ini的配置,调整上传文件大小的限制(以上限500M为例)
1
2
3
4
|
upload_max_filesize = 500M;//上传文件的最大值,还可以调更大
post_max_size = 500M; //post方式传递过来数据最大值,还可以调更大
max_execution_time = 1800; //页面最大执行时间,已经设置为最大值
max_input_time = 1800; //解析传入数据最大执行时间,已经设置为最大值
memory_limit = 128M; //每个页面消耗的最大内存,已经设置为最大值
|
介绍upload_progress.prefix和upload_progress.name 如何使用:
开启enabled 配置项,php能够在每一次上传文件时检测信息,在一个文件上传时,session.upload_progress.name会保存在$_SESSION中的一个键值
中,当php检测POST请求时,会在$_SESSION中添加一条数据,索引是session.upload_progress.prefix 和 session.upload_progress.name
连在一起的值。
<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="test" />
接到文件上传的表单后,PHP会在$_SESSION变量中新建键,键名是一个将session.upload_progress.prefix
的值与上面你自定义的标识符连接后得到的字符串,可以这样得到:
1
2
3
4
| $i = ini_get('session.upload_progress.name'); $key = ini_get("session.upload_progress.prefix") . $_GET[$i];
$_SESSION[$key]; // 就是此次上传文件的信息 |
打印后得到的信息:
我们就可以使用其中的 content_length 和 bytes_processed 两项来得到进度百分比。
实例程序:
index.php :
1
|
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style type="text/css">
.progress{
width:100%;
border:1px solid #4da8fe;
border-radius:40px;
height:20px;
position:relative;
}
.progress .label{
position:relative;
text-align:center;
}
.progress .bar{
position:absolute;
left:0;top:0;
background:#4D90FE;
height:20px;
border-radius:40px;
min-width:20px;
}
</style>
</head>
<body>
<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" />
<p><input type="file" name="file1" /></p>
<p><input type="submit" value="Upload" /></p>
</form>
<div id="progress" class="progress" style="margin-bottom:15px;display:none;">
<div class="bar" style="width:0%;"></div>
<div class="label">0%</div>
</div>
</div>
<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank" style="display:none;"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/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 .label').html(progress + '%');
$('#progress .bar').css('width', progress + '%');
if(progress < 100){
setTimeout('fetch_progress()', 1);
}else{
$('#progress .label').html('完成!');
}
}, 'html');
}
$('#upload-form').submit(function(){
$('#progress').show();
setTimeout('fetch_progress()', 1);
});
</script>
</body>
</html>
|
upload.php:
1
2
3
4 5 6 7 8 9 |
<?php
session_start();
if(is_uploaded_file($_FILES['file1']['tmp_name'])){
move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}");
}
?>
|
注意: upload.php 一定要开启session
progress.php:
1
2
3
4
|
<?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"];
//向 ajax 返回当前的上传进度百分比。
echo $current < $total ? ceil($current / $total * 100) : 100;
} else {
echo 100;
}
|