jqUploader 實際執行頁面

jqUploader 是一個基於jQuery 框架下的上傳套件，替換HTML文件上的字段和一個基於Flash文件上傳的小工具，可以顯示一個進度條和本分比，例如，如果想透過HTML指定最大的文件大小之類的設定豐富了及時上傳的使用者介面。

使用方法：
首先載入程式必要的檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="dependencies/swfobject.js"></script>
<script type="text/javascript" src="jquery.jqUploader.js"></script>


接著是HTML表單的建立
<form id="myUploadForm" enctype="multipart/form-data" action="flash_upload.php" method="POST" class="a_form">
<fieldset>
<legend>Your file</legend>
<ol>
<li class="jqUploader">
<label for="example1">Choose a file to upload: </label>
<input name="MAX_FILE_SIZE" value="1048576" type="hidden" />
<input name="example1"  id="example1"  type="file" />
</li>
</ol>
</fieldset>
<input type="submit" name="submit" value="Send" />
</form>

再來寫入JavaScript的程式片段
<script>
$(function(){
$(".jqUploader").jqUploader({
background: "FFFFDF",
barColor: "64A9F6",
                allowedExt:     "jpg|JPG|jpeg|JPEG"
});
});
</script>

最後再建立一個 flash_upload.php的檔案
$uploadDir = dirname(__FILE__) . '/files/';
$uploadFile = $uploadDir . basename($_FILES['Filedata']['name']);
if ($_POST['submit'] != '') {
    //是否由POST送出來
    if (!isset($_GET['jqUploader'])) {
        //是否有檔案上傳
        if (move_uploaded_file ($_FILES[0]['tmp_name'], $uploadFile)) {
            //檔案上傳成功
        } else {
            switch ($_FILES[0]['error']) {
                case 1: //檔案過大
                    break;
                case 2: //檔案過大
                    break;
                case 3: //只有部份檔案上傳
                    break;
                case 4: //沒有檔案被上傳
                    break;
                default:
                    //其他錯誤
            }
        }
    } else {
        // 檔案上傳錯誤
    }
} else {
    if ($_GET['jqUploader'] == 1) {
        // FLASH 上傳執行中
        if ($_FILES['Filedata']['name']) {
            if (move_uploaded_file ($_FILES['Filedata']['tmp_name'], $uploadFile)) {
                //檔案上傳成功
                return $uploadFile;
            }
        } else {
            if ($_FILES['Filedata']['error']) {
                return $_FILES['Filedata']['error'];
            }
        }
    }
}

基本的樣式就算式完成了
以下附上套件可供修改的參數值

參數	預設值	說明
maxFileSize	無	最大上傳字節 單位 Byte 此屬性設定於input 元素中例如 <input name="MAX_FILE_SIZE" value="1048576" type="hidden" />以上設定為1MB
width	320	Flash 元件的預設寬度
height	85	Flash 元件的預設高度
version	8	最小支援的Flash 版本
background	FFFFFF	Flash 的預設背景色碼
hideSubmit	true	是否自動隱藏上傳按鈕
cls	jqUploader	預設的 Class 名稱
src	jqUploader.swf	swf 的檔案位置
uploadScript	表單active	上傳後處理的伺服機端檔案
afterScript	無	上傳完成後到該頁面
varName	input 名稱屬性	上傳的Name
allowedExt	*.jpg; *.jpeg; *.png	允許上傳的檔案類型
allowedExtDescr	Images (*.jpg; *.jpeg; *.png)	瀏覽選擇框文字
params	空數組	上傳額外參數
flashvars	空數組	由Flash上傳額外參數
elementType	div	Flash 容器
barcolor	0000CC	進度條顏色
startMessage	表單的標籤	開始上傳顯示文字
errorSizeMessage	File is too big!	檔案太大的提示文字
validFileMessage	now click "upload" to proceed	檔案有效邀請使用者點擊上傳文字
progressMessage	Please wait, uploading	上傳中顯示文字 後面會接上%數
endMessage	You\'re all done!	上傳完成顯示文字

作者網站：http://www.pixeline.be/experiments/jqUploader/
檔案大小：116 KB(包含範例和所有的程式碼)
檔案下載：http://pixeline.be/wp-content/uploads/2010/12/jquery.jqUploader.1.0.2.3.zip
檔案備份：下載