VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > PHP >

  • PHP基于session.upload_progress 实现文件上传进度显示功能详解

本文实例讲述了PHP基于session.upload_progress 实现文件上传进度显示功能。分享给大家供大家参考，具体如下：

介绍

session.upload_progress 是PHP5.4的新特征。

当 session.upload_progress.enabled INI 选项开启时，PHP 能够在每一个文件上传时监测上传进度。 这个信息对上传请求自身并没有什么帮助，但在文件上传时应用可以发送一个POST请求到终端（例如通过XHR）来检查这个状态。

当一个上传在处理中，同时POST一个与INI中设置的session.upload_progress.name同名变量时，上传进度可以在$_SESSION中获得。 当PHP检测到这种POST请求时，它会在$_SESSION中添加一组数据, 索引是session.upload_progress.prefix与 session.upload_progress.name连接在一起的值。

开启session.upload_progress

修改php.ini文件，开启session.upload_progress的支持。

  1. session.upload_progress.enabled = On 
  2. session.upload_progress.cleanup = On 
  3. session.upload_progress.prefix = "upload_progress_" 
  4. session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS" 
  5. session.upload_progress.freq = "1%" 
  6. session.upload_progress.min_freq = "1" 

对于PHP语言，这应该是最好的解决方案了，因为这种方式依赖于PHP内部的session机制，开始上传文件创建相关session以便读取，文件上传完成就会销毁session。html5的文件上传api也可以显示上传进度，但是对IE的10以下的版本没法使用，所以兼容性不太好。

接下来，我们通过一个例子，实现以下相关效果。

修改php上传文件限制

php.ini默认的上传文件大小上限为2M，然而我们既然需要显示文件上传进度，肯定都是要能够上传比较大的文件。尤其我们在本地服务器上测试的时候，因为服务器保存的路径是在本地磁盘上，所以文件上传就相当于在磁盘上复制，速度很快，我们想要比较直观的看到上传进度的显示，就需要上传一个比较大的文件，我在测试的时候，上传的是一个400多M的压缩包。

可以通过下面的php.ini的配置，调整上传文件大小的限制（以上限500M为例）

upload_max_filesize = 500M; //上传文件的最大值，还可以调更大

post_max_size = 500M;    //post方式传递过来数据最大值，还可以调更大

max_execution_time = 1800; //页面最大执行时间，已经设置为最大值

max_input_time = 1800; //解析传入数据最大执行时间，已经设置为最大值

memory_limit = 128M;  //每个页面消耗的最大内存，已经设置为最大值

实例程序

首先放上最简单的部分，上传文件转存程序

upload.php

  1. <?php 
  2. if(isset($_FILES['demo'])){ 
  3.   $tmp=explode(".",$_FILES['demo']['name']); 
  4.   $suffix_name = end($tmp); 
  5.   $name = time().".".$suffix_name; 
  6.   $path = __DIR__."\\".$name; 
  7.   move_uploaded_file($_FILES['demo']['tmp_name'],$path); 
  8.   echo "upload success"; 
  9. }else{ 
  10.   echo "error"; 
  11. } 

然后是前台获取上传文件百分数的接口文件

progress.php

  1. <?php 
  2. session_start(); 
  3. $key = ini_get("session.upload_progress.prefix") . $_GET["key"]; 
  4. if (!emptyempty($_SESSION[$key])) { 
  5.   $current = $_SESSION[$key]["bytes_processed"]; 
  6.   $total = $_SESSION[$key]["content_length"]; 
  7.   echo $current < $total ? ceil($current / $total * 100) : 100; 
  8. }else{ 
  9.   echo 100; 
  10. } 

最后是前台的上传文件界面

index.html

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>上传文件示例程序</title> 
  6. </head> 
  7. <body> 
  8. <div id="fileUpload"> 
  9.   <form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" target="hidden_iframe"> 
  10.     <p> 
  11.       <input type="hidden" name="PHP_SESSION_UPLOAD_PROGRESS" value="file1" /> 
  12.       <input type="file" name="demo"> 
  13.       <input type="submit" value="上传"> 
  14.     </p> 
  15.   </form> 
  16. </div> 
  17. <iframe name="hidden_iframe" src="about:blank" style="display:none;"></iframe> 
  18. <div id="process"> 
  19.   上传进度：<span id="percent"></span> 
  20. </div> 
  21. </body> 
  22. <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> 
  23. <script> 
  24.   function fetch_progress(){ 
  25.     $.get('progress.php',{"key":"file1"}, function(data){ 
  26.       document.getElementById("percent").innerText = data+"%"; 
  27.       if(data == 100){ 
  28.         return; 
  29.       }else{ 
  30.         setTimeout(fetch_progress,100); 
  31.       } 
  32.     }); 
  33.   } 
  34.   $('#upload-form').submit(function(){ 
  35.     setTimeout(fetch_progress,100); 
  36.   }); 
  37. </script> 
  38. </html> 

在前台页面，通过form的target属性，将提交之后的页面指向了该页的iframe，避免了页面的跳转。

总结

php.ini默认配置的上传文件大小是2M，我们上传文件通常是需要修改一下配置文件使用的。

从php5.4开始，通过php.ini配置session.upload_progress之后，文件上传时，就会创建key为session.upload_progress.prefix+session.upload_progress.name的session。其中session.upload_progress.prefix是配置文件中定义的，session.upload_progress.name需要在form表单提交时，一并提交才可以。

文件开始上传，创建session，上传过程中，session文件中保存了以上传字节数和总字节数，可以以及计算得到上传文件百分比，在上传完成之后，该session会被销毁。

bootstrap样式的进度条

index.html加上bootstrap的进度条样式，顿时高大上多了，哈哈

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>上传文件示例程序</title> 
  6.   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" > 
  7.   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
  8.   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
  9. </head> 
  10. <body> 
  11. <div style="width: 400px;margin-top: 30px;margin-left: 30px;"> 
  12.   <div id="fileUpload"> 
  13.     <form class="form-horizontal" role="form" id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" target="hidden_iframe"> 
  14.       <input type="hidden" name="PHP_SESSION_UPLOAD_PROGRESS" value="file1" /> 
  15.       <div class="form-group"> 
  16.         <div class="col-sm-8" style="margin-top: 7px;"> 
  17.           <input type="file" name="demo" > 
  18.         </div> 
  19.         <div class="col-sm-4"> 
  20.           <button type="submit" class="btn btn-primary btn-sm">上传文件</button> 
  21.         </div> 
  22.       </div> 
  23.     </form> 
  24.   </div> 
  25.   <iframe name="hidden_iframe" src="about:blank" style="display:none;"></iframe> 
  26.   <div class="progress" style="display: none;"> 
  27.     <div id="percent" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:0%;"> 
  28.       0% 
  29.     </div> 
  30.   </div> 
  31. </div> 
  32. </body> 
  33. <script> 
  34.   function fetch_progress(){ 
  35.     $.get('progress.php',{"key":"file1"}, function(data){ 
  36.       document.getElementById("percent").innerText = data+"%"; 
  37.       document.getElementById("percent").setAttribute("style","width:"+data+"%;"); 
  38.       document.getElementsByClassName("progress")[0].setAttribute("style","display: block;"); 
  39.       if(data == 100){ 
  40.         return; 
  41.       }else{ 
  42.         setTimeout(fetch_progress,100); 
  43.       } 
  44.     }); 
  45.   } 
  46.   $('#upload-form').submit(function(){ 
  47.     setTimeout(fetch_progress,100); 
  48.   }); 
  49. </script> 
  50. </html> 

显示效果

PHP基于session.upload_progress 实现文件上传进度显示功能详解
 

出处：http://www.phpfensi.com/php/20211210/19018.html


相关教程