您的位置：首页 > 编程语言 > PHP开发

php 配合session + javascrip + Ajax 实现文件上传的进度条

2017-08-16 22:27 1136 查看
这个功能主要是解决大文件上传，提供一个进度条显示的功能。PHP 5.4中引入的基于session的上传进度监视功能(session.upload_progress)，它提供了一个服务器端的上传进度监视解决方案。升级到PHP 5.4之后，可以不必安装APC扩展，仅使用原生PHP和前端的Javascript即可实现上传进度条。原理：当浏览器向服务器端上传一个文件时，PHP将会把此次文件上传的详细信息(如上传时间、上传进度等)存储在session当中。然后，随着上传的进行，周期性的更新session中的信息。这样，浏览器端就可以使用Ajax周期性的请求一个服务器端脚本，由该脚本返回session中的进度信息；浏览器端的Javascript即可根据这些信息显示/更新进度条了。PHP 5.4 中引入了一些配置项(在php.ini中进行设置)
12345678
session.upload_progress.enabled
= On   // 开启upload_progress 功能  
session.upload_progress.cleanup
= On   //
请求提交完成后，是否清除session的相关信息。
session.upload_progress.prefix
= "upload_progress_"   //
设置进度信息在session中存储的变量名
session.upload_progress.name
= "PHP_SESSION_UPLOAD_PROGRESS" //
设置进度信息在session中存储的键名
session.upload_progress.freq
=  "1%"        //  每次返回上传信息的1%
session.upload_progress.min_freq
= 1   // 设置多长时间返回一次上传的信息   (秒)
 

修改php上传文件限制：

php.ini默认的上传文件大小上限为2M，然而我们既然需要显示文件上传进度，肯定都是要能够上传比较大的文件。尤其我们在本地服务器上测试的时候，因为服务器保存的路径是在本地磁盘上，所以文件上传就相当于在磁盘上复制，速度很快，我们想要比较直观的看到上传进度的显示，就需要上传一个比较大的文件，我在测试的时候，上传的是一个400多M的压缩包。可以通过下面的php.ini的配置，调整上传文件大小的限制（以上限500M为例）
1234
upload_max_filesize
= 500M;//上传文件的最大值，还可以调更大
post_max_size
= 500M;      //post方式传递过来数据最大值，还可以调更大
max_execution_time
= 1800;  //页面最大执行时间，已经设置为最大值
max_input_time
= 1800;  //解析传入数据最大执行时间，已经设置为最大值
memory_limit
= 128M;    //每个页面消耗的最大内存，已经设置为最大值
介绍upload_progress.prefix和upload_progress.name 如何使用： 开启enabled 配置项，php能够在每一次上传文件时检测信息，在一个文件上传时，session.upload_progress.name会保存在$_SESSION中的一个键值中，当php检测POST请求时，会在$_SESSION中添加一条数据，索引是session.upload_progress.prefix 和 session.upload_progress.name连在一起的值。   <input type="hidden" name="<?php echo ini_get("session.upload_progress.name");?>" value="test" />           接到文件上传的表单后，PHP会在$_SESSION变量中新建键，键名是一个将session.upload_progress.prefix 的值与上面你自定义的标识符连接后得到的字符串，可以这样得到： 
1234
$i
= ini_get('session.upload_progress.name');
$key
= ini_get("session.upload_progress.prefix") . $_GET[$i];
$_SESSION[$key]; // 就是此次上传文件的信息
打印后得到的信息：  我们就可以使用其中的 content_length 和 bytes_processed 两项来得到进度百分比。
实例程序：
 index.php :
<?php session_start(); ?><!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><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="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><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()', 1);}else{$('#progress .label').html('完成!');}}, 'html');}$('#upload-form').submit(function(){$('#progress').show();setTimeout('fetch_progress()', 1);});</script></body></html>
upload.php:
123456789
<?php
session_start();
 if(is_uploaded_file($_FILES['file1']['tmp_name'])){
 move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}");
}
?>
  注意： upload.php 一定要开启sessionprogress.php：
1234
<?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"];
   //向 ajax 返回当前的上传进度百分比。
    echo $current < $total ? ceil($current / $total * 100) : 100;
}else {
 echo100;
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航