PHP+apc+ajax实现的ajax_upload上传进度条代码

本文实例讲述了PHP+apc+ajax实现的ajax_upload上传进度条代码,分享给大家供大家参考,具体如下:

上传进度条是怎么实现的呢?原理是怎么样的呢?当我们浏览,选择上传后,会产生一个临时文件,上传的时把这个临时文件,上传到服务器,上传完成后,这个临时文件会被删除掉。如果我们能读取这个临时文件的大小,就知道上传进度是多少了,php apc模块可以实现这个功能。

一、安装apc模块

下载地址:http://pecl.php.net/package/apc

  1. tar zxvf APC-3.1.8.tgz
  2. cd APC-3.1.8/
  3. /usr/local/php/bin/phpize
  4. ./configure --with-php-config=/usr/local/php/bin/php-config
  5. make && make install

二、修改php.ini

  1. extension = apc.so
  2. apc.rfc1867 = 1
  3. apc.max_file_size = 200M
  4. upload_max_filesize = 1000M
  5. post_max_size = 1000M
  6. max_execution_time = 600
  7. max_input_time = 600
  8. memory_limit = 128M

修改好后,重起apache或者其他,查看一下

  1. [root@BlackGhost php]# php -m
  2. [PHP Modules]
  3. apc
  4. cgi-fcgi
  5. ctype
  6. curl
  7. date
  8. dom
  9. eAccelerator
  10. 。。。。。。。。

三、upload_test.php

  1. <?php
  2. $id = uniqid(rand(), true);
  3. ?>
  4. <html>
  5. <script type='text/javascript' src='jquery-1.3.2.js'></script>
  6. <script type='text/javascript' src='ajaxupload.3.1.js'></script>
  7. <script type='text/javascript' src='upload.js'></script>
  8. <body >
  9. <h1>上传测试</h1><form enctype="multipart/form-data" method="POST">
  10. <input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?=$id?>" />
  11. <input type="file" name="file" value=""/><br/><input type="submit" value="Upload!" />
  12. </form>
  13. <div >
  14. <div >
  15. </div>
  16. </div>
  17. <br />
  18. <div ></div><br>
  19. <div ></div><br>
  20. </body>
  21. </html>
  22. <script type="text/javascript">
  23. $(document).ready(function(){
  24. form_submit();
  25. });
  26. </script>

APC_UPLOAD_PROGRESS这个有什么用呢?它对上传的文件添加一个标记,就可以在其它的php程序中用这个标记访问它。为apc的读取提供支持。

upload.js异步上传的js文件:

  1. function form_submit (){
  2. new AjaxUpload('#upload', {
  3. action: 'upload.php',
  4. name: 'file',
  5. data: {
  6. APC_UPLOAD_PROGRESS:$("#progress_key").val()
  7. },
  8. autoSubmit: true,
  9. onSubmit: function(file, extension){
  10. $('#progressouter').css('display', 'block');
  11. progress();
  12. },
  13. onComplete: function(file, response){
  14. $("#showInfo").html(response);
  15. }
  16. });
  17. }
  18. function progress (){
  19. $.ajax({
  20. type: "GET",
  21. url: "progress.php?progress_key="+$("#progress_key").val(),
  22. dataType: "json",
  23. cache:false,
  24. success: function(data){
  25. if(data == 0) {
  26. var precent = 0;
  27. } else {
  28. for (i in data) {
  29. if (i == "current") {
  30. var json_current = parseInt(data[i]);
  31. }
  32. if (i == "total") {
  33. var json_total = parseInt(data[i]);
  34. }
  35. }
  36. var precent = parseInt(json_current/json_total * 100);
  37. $("#progressinner").css("width",precent+"%");
  38. $("#showNum").html(precent+"%");
  39. $("#showInfo").html("ok");
  40. }
  41. if ( precent < 100) {
  42. setTimeout("progress()", 100);
  43. }
  44. }
  45. });
  46. }

上面有一点要注意,APC_UPLOAD_PROGRESS:$("#progress_key").val()在这里,key是APC_UPLOAD_PROGRESS如果不是这个的话,apc找不到临时文件的。在这里我为什么要用ajax_upload.js呢,因为jquery自带的ajax,自带参数没有上传文件的,也就是type='file'中的内容,php端根本得不到。

四、upload.php上传文件

  1. <?php
  2. if($_SERVER['REQUEST_METHOD'] == 'POST') {
  3. if(emptyempty($_FILES["file"]["tmp_name"])){
  4. echo "no file";
  5. die;
  6. }
  7. $tmp_name = $_FILES["file"]["tmp_name"];
  8. $name = dirname($_SERVER['SCRIPT_FILENAME'])."/upload/".$_FILES["file"]["name"];
  9. move_uploaded_file($tmp_name, $name);
  10. echo "<p>File uploaded.</p>";
  11. }
  12. ?>

如果文件比较大,就不要用http的方式来上传了,太慢,并且影响网站的稳定性。

五、progress.php取得进度的文件,给ajax调用用的

  1. <?php
  2. if(isset($_GET['progress_key'])) {
  3. $status = apc_fetch('upload_'.$_GET['progress_key']);
  4. if($status['total']!=0 && !emptyempty($status['total'])) {
  5. echo json_encode($status);
  6. } else {
  7. echo 0;
  8. }
  9. }
  10. ?>

看一下,ajax 异步请求产生的数据。

php apc ajax 上传进度条

参数说明:

total 文件大小

current 已上传的大小

filename 上传文件名

name 标签名

done 上传成功为1

cancel_upload 用户取消上传,只有上传完成时才有

rate 上传速度,只有上传完成时才有

start_time 开始时间