当文件过大,或者用户网络状态一般,通常上传过程需要一段时间,如果这时候让用户白屏等待的话,相信大部分用户都会直接关掉应用,所以一个监控上传进度,并实时向用户报告的需求就被产品汪摆在了桌面上。一个高逼格的上传进度提示,会让你的应用瞬间变成被仰望的存在。
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中,会出现一个如下结果的数组:
1 $_SESSION["upload_progress_test"] = array( 2 //请求时间 3 "start_time" => 1234567890, 4 // 上传文件总大小 5 "content_length" => 57343257, 6 //已经处理的大小 7 "bytes_processed" => 453489, 8 //当所有上传处理完成后为TRUE,未完成为false 9 "done" => false, 10 11 "files" => array( 12 0 => array( 13 //表单中上传框的名字 14 15 "field_name" => "file1", 16 17 //上传文件的名称 18 "name" => "test1.avi", 19 20 //缓存文件,上传的文件即保存在这里 21 "tmp_name" => "/tmp/phpxxxxxx", 22 23 //文件上传的错误信息 24 "error" => 0, 25 26 //是否上传完成,当这个文件处理完成后会变成TRUE 27 "done" => true, 28 29 //这个文件开始处理时间 30 "start_time" => 1234567890, 31 32 //这个文件已经处理的大小 33 "bytes_processed" => 57343250, 34 ), 35 36 1 => array( 37 "field_name" => "file2", 38 "name" => "test2.avi", 39 "tmp_name" => NULL, 40 "error" => 0, 41 "done" => false, 42 "start_time" => 1234567899, 43 "bytes_processed" => 54554, 44 ), 45 ) 46 );
这个数组详细记录了文件上传的进度,已经处理完的文件状态为true。下面,我们通过一个jQuery的AJAX实例,来学习一下文件上传进度的流程。
首先,在表单中,需要添加一个type=hidden 的 input 标签,标签 value 为自定义(建议使用有一定意义的值,因为这个值将要在后台用到)
1 <form id="upload-form" action="upload.php" method="POST" enctype="multipart/form-data" style="margin:15px 0" target="hidden_iframe"> 2 <input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="test" /> 3 <p><input type="file" name="file1" /></p> 4 <p><input type="submit" value="Upload" /></p> 5 </form> 6 <div id="progress" class="progress" style="margin-bottom:15px;display:none;"> 7 <div class="label">0%</div> 8 </div>
这里,添加了一个ID为progress的div,作为展示上传进度的容器。我们通过js的setTimeout(),定时执行ajax来获取文件上传进度,后台文件返回文件上传的进度百分比。
1 <script src="../jquery/1.8.2/jquery.min.js"></script> 2 <script type="text/javascript"> 3 function fetch_progress(){ 4 $.get('progress.php',{ '<?php echo ini_get("session.upload_progress.name"); ?>' : 'test'}, function(data){ 5 var progress = parseInt(data); 6 $('#progress .label').html(progress + '%'); 7 if(progress < 100){ 8 setTimeout('fetch_progress()', 100); //当上传进度小于100%时,显示上传百分比 9 }else{ 10 $('#progress .label').html('完成!'); //当上传进度等于100%时,显示上传完成 11 } 12 }, 'html'); 13 } 14 15 $('#upload-form').submit(function(){ 16 $('#progress').show(); 17 setTimeout('fetch_progress()', 100);//每0.1秒执行一次fetch_progress(),查询文件上传进度 18 }); 19 </script>
上面这段代码,就是通过JQ的ajax,每0.1秒返回一次文件上传进度。并把进度百分比在div 标签中显示。
后台代码,需要分为两个部分,upload.php处理上传文件。progress.php 获取session中的上传进度,并返回进度百分比。
这里文件上传就不再赘述,详细步骤参见上文,upload.php:
1 <?php 2 if(is_uploaded_file($_FILES['file1']['tmp_name'])){ //判断是否是上传文件 3 //unlink($_FILES['file1']['tmp_name']); 4 move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}"); //将缓存文件移动到指定位置 5 } 6 ?>
主要关注progress.php:
1 <?php 2 /* 3 开启session。请注意在session_start()之前,请不要有想浏览器输出内容的动作,否则可能引起错误。 4 */ 5 6 session_start(); 7 8 //ini_get()获取php.ini中环境变量的值 9 $i = ini_get('session.upload_progress.name'); 10 11 //ajax中我们使用的是get方法,变量名称为ini文件中定义的前缀 拼接 传过来的参数 12 $key = ini_get("session.upload_progress.prefix") . $_GET[$i]; 13 //判断 SESSION 中是否有上传文件的信息 14 if (!empty($_SESSION[$key])) { 15 //已上传大小 16 $current = $_SESSION[$key]["bytes_processed"]; 17 //文件总大小 18 $total = $_SESSION[$key]["content_length"]; 19 20 //向 ajax 返回当前的上传进度百分比。 21 echo $current < $total ? ceil($current / $total * 100) : 100; 22 }else{ 23 echo 100; 24 } 25 ?>
到这里,文件进度的代码就已经完成了,配合前端,我们就可以做一个炫酷的文件上传功能啦!
转自:http://blog.csdn.net/qq_14913213/article/details/54617238
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理