PHP檔案上傳進度條完整程式實現 jQuery Ajax 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   顯示檔案上傳的客戶端頁面

 

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" style="text-decoration:none;color:#765F47;">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

  

//初始化對話方塊，讓對話方塊隱藏，不自動彈出，並設定對話方塊關閉的速度（速率）
$.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;
}

  //這一段用來檢查apc是否可用

if (function_exists('apc_fetch')) {
echo 'it surpport apc model!';
} else {
    echo "it's not support apc model!";
}
?>
 

 李婉佳的檔案上傳

 

lwjfileUp.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 "

$upfile.上傳成功。 Thank you!

";
 }

?>

 

getProgress.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);
}
?>
---------&gt>轉載於:http://blog.sina.com.cn/s/blog_48ed03c80100nrzq.html

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29119536/viewspace-1193203/，如需轉載，請註明出處，否則將追究法律責任。