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('伺服器錯誤,請聯絡管理員');
}
});
}
