PHP、MySQL、ExtJS、Linux、CentOS、Ubuntu

介紹請看這篇
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

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









hidden欄位不可少，那是給上傳檔案一個編號，以便做進度追蹤
$id是使用php function uniqid("") 產生
再來就是使用startProgress()來初始化某些值後開始追蹤上傳進度
function startProgress(){
    setTimeout("getProgress()", 1000);
}
因為我沒有要初值化的東西，所以等待檔案上傳一秒後呼叫getProgress();

var server_url = "getprogress.php?progress_key=";
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=";
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('伺服器錯誤,請聯絡管理員'); 
            }
    });
}