一、原理介绍
当客户端向服务端上传一个文件时候，php会把此文件的详细信息存储在session中，并且周期性的进行更新。这样客户端要做的就是，通过ajax定时请求session中的信息(进度信息)，然后更新客户端的进度条即可。
二、开启session对上传进度的支持
修改php.ini文件，如下
session.upload_progress.enabled = On
session.upload_progress.cleanup = On
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"
三、修改php.ini对上传文件大小的限制
max_execution_time 必须足够大
file_uploads = On 打开
upload_max_filesize 必须足够大
post_max_size 必须足够大
max_input_time 必须足够大
memory_limit 必须足够大
四、实例程序操作
index.php，这个文件有引用了bootstrap.min.css的样式，记得下载
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Demo : PHP(5.4) Upload Progress via Session</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="">
<meta name="robots" content="INDEX,FOLLOW" />
<link rel="shortcut icon" href="/favicon.ico">
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<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="nav" class="container">
<div class="inner">
<a href="/" class="logo">PureWeber</a>
<ul>
<li><a id="to-top" href="#nav">« 回到文章</a></li>
</ul>
</div>
</div>
<div id="wrap" class="container">
<div id="header">
<h1>Demo : PHP(5.4) Upload Progress via Session</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" />
<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> <!-- #article -->
<div id="footer">
<p>Copyright © 2012 PureWeber.com</p>
</div>
</div><!-- #wrap -->
<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()', 1000);
}else{
$('#progress .label').html('完成!');
}
}, 'html');
}
$('#upload-form').submit(function(){
$('#progress').show();
setTimeout('fetch_progress()', 1000);
});
</script>
</body>
</html>
upload.php
<?php
if(is_uploaded_file($_FILES['file1']['tmp_name'])){
//unlink($_FILES['file1']['tmp_name']);
move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}");
}
?>
progesss.php
<?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;
}
?>
访问这个index.php即可
效果如下
image.png
