php apc上传文件带进度

实现效果:

PHP文件上传进度条完整程序实现 <wbr>jQuery <wbr>Ajax <wbr>apc
PHP文件上传进度条完整程序实现 <wbr>jQuery <wbr>Ajax <wbr>apc
PHP文件上传进度条完整程序实现 <wbr>jQuery <wbr>Ajax <wbr>apc
PHP文件上传进度条完整程序实现 <wbr>jQuery <wbr>Ajax <wbr>apc

 

准备工作:

1、参考IBM的PHP V5.2 中的新增功能,第 5 部分: 跟踪文件上传进度,以下是链接地址:http://www.ibm.com/developerworks/cn/opensource/os-php-v525/

   这篇文章对php文件上传进度讲得很详细,不过,是用iframe实现的。

2、下载php_apc.dll。在网上很容易搜到php_apc.dll的下载地址。

   将php_apc.dll放在ext文件夹下,比如:C:\AppServ\php5\ext。在C:\WINDOWS的php.ini文件中找到;extension=php_zip.dll这行,在这行之后添加:

extension=php_apc.dll
;apc.enabled = 1
;apc.shm_segments = 1
;apc.shm_size = 64
;apc.optimization = 0
;apc.num_files_hint = 1000
;apc.ttl = 0
;apc.gc_ttl = 3600
;apc.cache_by_default = On
;apc.slam_defense = 0
;apc.file_update_protection = 2
;apc.enable_cli = 0
;apc.stat=0
apc.rfc1867=1
apc.max_file_size = 100M
upload_max_filesize = 100M
post_max_size = 100M

    以上被注释掉的内容,是另外一些对配置的设置的说法。我发现,如果这样设置,每次网页文件修改后,都必须重启服务器,才能刷新,否则,修改后,无法看到修改后的网页内容。

    修改完配置,记得重启服务器。

3、因为实现提交和显示进度条用到jQuery的内容,上传文件也采用了jQuery的弹出对话框的方式,所以,要下载jQuery的核心文件和UI文件。

    jQuery的核心文件在jQuery的首页上就可以下载,文件名为jquery-1.4.3.js,注意版本号,如果下载的版本号与后续程序中的不一致,记得修改程序中的文件名。

    UI文件的下载地址:http://jqueryui.com/download

    可以将可选组件全部勾选。下载的文件夹名jquery-ui-1.8.6.custom。在后续程序中用到的js文件和css文件全部可以在这个文件夹中找到。注意:在该文件夹的development-bundle子文件夹中,必须有jquery-1.4.3.js(或者其它版本)文件存在,否则,文件夹中的demos子文件夹中的例子程序,都无法运行。

    还要下载jQuery的表单插件,下载地址:http://malsup.com/jquery/form/#download

 

页面组成

1、lwjUpload1.php   显示文件上传的客户端页面

2、lwjfileUp.php    处理文件上传的服务器端页面

3、getProgress.php  获得文件上传进度缓存的服务器端页面

 

程序实现

lwjUpload1.php   显示文件上传的客户端页面

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>李婉佳的文件上传进度条</title>
<link type="text/css" href="css/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="css/demos.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.4.3.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.bgiframe-2.1.1.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.position.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="scripts/jquery.effects.core.js"></script>
<script type="text/javascript" src="scripts/jquery.effects.highlight.js"></script>
<script type="text/javascript" src="scripts/jquery.effects.scale.js"></script>
<script type="text/javascript" src="scripts/jquery.effects.blind.js"></script>
<script type="text/javascript" src="scripts/jquery.effects.explode.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
input,label
{
margin-top:10px;
}
#fileUpload
{
width:20em;
height:2em;
}
a.aButton
{
font-size:1.2em;
color:black;
}
a.aButton:hover
{
color:#0066CC;
text-decoration:none;
}
</style>
  
<script type="text/javascript">

//初始化对话框,让对话框隐藏,不自动弹出,并设置对话框关闭的速度(速率)
$.fx.speeds._default = 500; //对话框显示和隐藏的速度
$(function(){
 $("#dialog").dialog({ 
  autoOpen: false,
  show: 'scale',   //对话框显示的方式

  hide: 'explode'  //对话框隐藏的方式
 })
});

 

//弹出文件上传的对话框
var uid ;   //为隐藏表单
APC_UPLOAD_PROGRESS定义value的变量

function dialogOpen()
{
 //document.getElementByIdx_x("fileUpload").value = "";//无法通过这个方式给file类型的input赋值,只读
 
//每次打开“文件上传”对话框时,先清空对话框中上次显示的Ajax消息、上传进度百分数和进度条

 document.getElementByIdx_x("output1").innerHTML="";
 document.getElementByIdx_x("test1").innerHTML="";
 document.getElementByIdx_x("progressouter").style.display="none";

 $("#dialog").dialog("open");
 return false;
}

//设置ajaxSubmit的参数
var options = {
 target:'#output1',
 beforeSubmit:showResponse

 //一定要设置为提交前(beforeSubmit),不能是提交后(success),否则无法获得文件上传的缓存
};

function showResponse(responseText,statusText){
 //alert('状态:' + statusText + '\n返回的内容是:\n' + responseText);
 var newId = document.getElementByIdx_x("progress_key");
 //产生一个由时间戳和随机数组成的字符串,作为隐藏表单APC_UPLOAD_PROGRESS的value

 var temp1 = new Date().getTime().toString();
 var temp2 = Math.random().toString();
 uid = temp1 + temp2; 
 //uid必须在每次单击“文件上传”时生成一遍,保证每个上传的文件有不同的APC_UPLOAD_PROGRESSid

 //否则,传完一个文件后,再传第二个文件时,没有进度条的效果

 newId.value = uid;
 document.getElementByIdx_x("progressouter").style.display="block";
 document.getElementByIdx_x("progressinner").style.width = "0%";
 getProgress();
}

function getProgress()
{
 $.ajax({
  success:getStatus,
  
url:'getProgress.php?progress_key=' + uid,
  type:'get',
  dataType:'text',
  cache:false  //一定要加上这个条件,保证不缓存,否则,页面不会动态刷新,就没有进度条效果

 });
}

function getStatus(responseText,statusText)
{
 var t1 = document.getElementByIdx_x("test1");
 t1.innerHTML = responseText.toString()+"%";
 if(responseText<100)
 {
  document.getElementByIdx_x("progressinner").style.width = responseText+"%";
  setTimeout("getProgress()",10);
 }
 else if(responseText>=100)
 {
  document.getElementByIdx_x("progressinner").style.width = "100%";
 }
}

function ajaSub()
{
 $('#myForm').ajaxSubmit(options);
 return false;
}

</script>
</head>

<body>
 <?php
//这一段用来检查apc是否可用

if (function_exists('apc_fetch')) {
echo 'it surpport apc model!';
} else {
    echo "it's not support apc model!";
}
?>
 <div id="dialog" title="李婉佳的文件上传">
  <form id="myForm" action="lwjfileUp.php" method="post" enctype="multipart/form-data" οnsubmit="return ajaSub();">
   <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" />
   <p><input type="file" id="fileUpload" name="myfile" /></p>   
   <p><input type="submit" value="文件上传" /></p>
   <p id="output1"></p>
   <div id="progressouter" style="width:75px; height:12px; border:1px solid gray; display:none;">
       <div id="progressinner" style="position:relative; height:12px; background-color:#6699ff; width:0%; ">
       </div>
   </div>
   <p id="test1"></p>
  </form>
 </div>
 <a class="aButton" href="#" οnclick="dialogOpen();">李婉佳的文件上传</a>

</body>
</html>

 

lwjfileUp.php    处理文件上传的服务器端页面

 

<?php
 
 header("Content-Type:text/html; charset=utf-8");
 if($_SERVER['REQUEST_METHOD']=='POST')
 {
  $dirName = 'D:/Code/精通CSS(第2版)/';  //存放上传文件的服务器端文件夹路径
  $dirName = iconv("utf-8","gb2312//IGNORE",$dirName);  //转换字符编码,否则,中文路径会出错
  $temp = $_FILES['myfile']['name'];
  $temp = iconv("utf-8","gb2312//IGNORE",$temp);
  $upfile = $dirName.time().$temp;
  //$upfile = $dirName.time().$_FILES['myfile']['name'];
  if(!move_uploaded_file($_FILES["myfile"]["tmp_name"], $upfile))
  {
   echo '不能将文件移动到指定目录';
   exit;
  }
  $upfile = iconv("gb2312","utf-8//IGNORE",$upfile);
  echo "<p>$upfile.上传成功。 Thank you!</p>";
 }

?>

 

getProgress.php  获得文件上传进度缓存的服务器端页面

 

<?php
if(isset($_GET['progress_key'])) {

 $status = apc_fetch('upload_'.$_GET['progress_key']);
 if($status['total'] == 0)
 {
 $temp = 0;
 }
 else
 {
  $temp = $status['current']/$status['total']*100;
 }
 echo ceil($temp);
}
?>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值