9.6 文件上传进度处理
最后更新于:2022-04-02 00:21:18
当文件过大,或者用户网络状态一般,通常上传过程需要一段时间,如果这时候让用户白屏等待的话,相信大部分用户都会直接关掉应用,所以一个监控上传进度,并实时向用户报告的需求就被产品汪摆在了桌面上。一个高逼格的上传进度提示,会让你的应用瞬间变成被仰望的存在。
PHP在5.4之前,总是需要安装额外的扩展才能监控到文件上传进度。而从5.4开始,引入session.upload_progress的新特性,我们只需要在php.ini中开启配置,即可通过session监控文件上传进度。在php.ini中。
**注意:本章学习需要有session基础和javascript和ajax基础。**
我们需要配置,注意查看和修改php.ini文件:
| 配置项 | 说明|
| -- | -- |
| session.upload_progress.enabled | 是否启用上传进度报告(默认开启) 1为开启,0为关闭 |
| session.upload_progress.cleanup | 是否在上传完成后及时删除进度数据(默认开启, 推荐开启) |
| session.upload_progress.prefix[=upload_progress_] | 进度数据将存储在_SESSION[session.upload_progress.prefix . _POST[session.upload_progress.name]] |
| session.upload_progress.name[=PHP_SESSION_UPLOAD_PROGRESS] | 如果_POST[session.upload_progress.name]没有被设置, 则不会报告进度. |
| session.upload_progress.freq[=1%] | 更新进度的频率(已经处理的字节数), 也支持百分比表示’%’. |
|session.upload_progress.min_freq[=1.0] | 更新进度的时间间隔(秒级)|
开启了配置,我们可以通过session,来记录一个完整的文件上传进度。在session中,会出现一个如下结果的数组:
~~~
$_SESSION["upload_progress_test"] = array(
//请求时间
"start_time" => 1234567890,
// 上传文件总大小
"content_length" => 57343257,
//已经处理的大小
"bytes_processed" => 453489,
//当所有上传处理完成后为TRUE,未完成为false
"done" => false,
"files" => array(
0 => array(
//表单中上传框的名字
"field_name" => "file1",
//上传文件的名称
"name" => "test1.avi",
//缓存文件,上传的文件即保存在这里
"tmp_name" => "/tmp/phpxxxxxx",
//文件上传的错误信息
"error" => 0,
//是否上传完成,当这个文件处理完成后会变成TRUE
"done" => true,
//这个文件开始处理时间
"start_time" => 1234567890,
//这个文件已经处理的大小
"bytes_processed" => 57343250,
),
1 => array(
"field_name" => "file2",
"name" => "test2.avi",
"tmp_name" => NULL,
"error" => 0,
"done" => false,
"start_time" => 1234567899,
"bytes_processed" => 54554,
),
)
);
~~~
这个数组详细记录了文件上传的进度,已经处理完的文件状态为true。下面,我们通过一个jQuery的AJAX实例,来学习一下文件上传进度的流程。
首先,在表单中,需要添加一个type=hidden 的 input 标签,标签 value 为自定义(建议使用有一定意义的值,因为这个值将要在后台用到)
~~~
';
~~~
这里,添加了一个ID为progress的div,作为展示上传进度的容器。我们通过js的setTimeout(),定时执行ajax来获取文件上传进度,后台文件返回文件上传的进度百分比。
~~~
~~~
上面这段代码,就是通过JQ的ajax,每0.1秒返回一次文件上传进度。并把进度百分比在div 标签中显示。
后台代码,需要分为两个部分,upload.php处理上传文件。progress.php 获取session中的上传进度,并返回进度百分比。
这里文件上传就不再赘述,详细步骤参见上文,upload.php:
~~~
~~~
主要关注progress.php:
~~~
~~~
到这里,文件进度的代码就已经完成了,配合前端,我们就可以做一个炫酷的文件上传功能啦!