【PHP】追蹤檔案上傳進度（實作篇）

介紹請看這篇

http://www.wretch.cc/blog/herbjoyce/10148542



仔細閱讀過他們Code之後

發現可以不使用Google API的情況下也可以完成

Google API 的功用主要在於使用Ajax方式Call檔案上傳進度的PHP

所以主要要先安裝APC

如何安裝在介紹頁裡已經講的很詳細

就不在此贅述

安裝完成後

需要一個上傳的介面和一個進度欄(ProgressBar)

ProgressBar我使用的是ExtJS的ProgressBar

var pbar = new Ext.ProgressBar({

        id:'pbar',

        cls:'custom',

        renderTo:'p'

});

需放在網頁最下方（要使網頁load完成後才產生此bar，要不然會出錯）

HTML部分別忘記加上對應的DIV

<div id="p" style="width:300px;"></div>

再來需要一個上傳的form如下：

<form enctype="multipart/form-data" id="upload_form" action="target.php" method="POST">



<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $id?>"/>

<input type="file" id="test_file" name="test_file"/><br/>

<input onclick="startProgress(); return true;" type="submit" value="Upload!"/>



</form>



hidden欄位不可少，那是給上傳檔案一個編號，以便做進度追蹤

$id是使用php function uniqid("") 產生

再來就是使用startProgress()來初始化某些值後開始追蹤上傳進度

function startProgress(){

    setTimeout("getProgress()", 1000);

}

因為我沒有要初值化的東西，所以等待檔案上傳一秒後呼叫getProgress();



var server_url = "getprogress.php?progress_key=<?php echo($id)?>";

function getProgress(){

   

    http_request = null;

    url = server_url;

   

    //嘗試使用各種方式開啟不同瀏覽器的http_request

    if (window.XMLHttpRequest) { // Mozilla, IE7, Safari,...

        http_request = new XMLHttpRequest();

        if (http_request.overrideMimeType) {

            http_request.overrideMimeType('text/xml');

        }

           http_request.open('GET', url, 'false');     

    } else if (window.ActiveXObject) { // IE6

        try {

            http_request = new ActiveXObject("Msxml2.XMLHTTP");

            http_request.open('GET', url, 'false');     

        } catch (e) {

            try {

                http_request = new ActiveXObject("Microsoft.XMLHTTP");

                http_request.open('GET', url, 'false');     

            } catch (e) {}

        }

    }



    if (!http_request) {

        alert('Giving up :( Cannot create an XMLHTTP instance');

        return false;

    }

    //開啟後便呼叫doCallback取得response

    http_request.onreadystatechange = doCallback;       

    http_request.send(null);

   

    function doCallback() {



        if (http_request.readyState == 4) {

            if (http_request.status == 200) {

               

                if(http_request.responseText != "done"){

                    //在此取得並設定%數

                    percent = http_request.responseText;

                    pbar.updateProgress((percent/100), Math.round(percent)+'% completed...');

                    if (percent < 100){

                        setTimeout("getProgress(server_url)", 100);

                    }

                }

               

                //if(msg!=null)alert(msg);                      

            } else {

                //document.getElementById(target).innerHTML = http_request.responseText;

                alert('There was a problem with the request.');

            }

        }

       

    }

}



到此大致上就完成了





==============================================================



使用ExtJS framework 完成 getProgress()



var server_url = "getprogress.php?progress_key=<?php echo($id)?>";

function getProgress(){

   

    Ext.Ajax.request({

            url: server_url,

            method: 'POST',

            success: function(result) {

                percent = result.responseText;

                pbar.updateProgress((percent/100), Math.round(percent)+'% completed...');

                if (percent < 100){

                        setTimeout("getProgress()", 100);

                }

            },

            failure: function() {

               alert('伺服器錯誤,請聯絡管理員'); 

            }

    });

}