<input type="hidden" value="test" />
<p><input type="file" /></p>
<p><input type="submit" value="Upload" /></p>
</form>
<iframe src="https://www.jb51.net/about:blank"></iframe>
<div>
<div></div>
<div>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!
注意事项
input标签的位置
name为session.upload_progress.name的input标签一定要放在文件input <input type="file" /> 的前面。
取消上传
通过设置 $_SESSION[$key]['cancel_upload'] = true 可取消当次上传。但仅能取消正在上传的文件和尚未开始的文件。已经上传成功的文件不会被删除。
setTimeout vs. setInterval