SWFUpload檔案上傳外掛程式用法詳解

SWFUpload的初始化與配置
首先，在頁面中引用SWFUpload.js ，如
<script type=”text/javascript” src=”http://www.swfupload.org/swfupload.js”></script>
然後，初始化SWFUpload ，如
var swfu;
window.onload = function () {
swfu = new SWFUpload({
upload_url : “http://www.swfupload.org/upload.php”,
flash_url : “http://www.swfupload.org/swfupload_f9.swf”, file_size_limit : “20480″
});
};
以下是一個標準的SWFUpload初始化設定所需的參數，你可以根據需要自己進行刪減：
{
upload_url : “http://www.swfupload.org/upload.php”, 處理上傳請求的伺服器端指令碼URL
file_post_name : “Filedata”, 是POST過去的$_FILES的數組名
post_params : {
“post_param_name_1″ : “post_param_value_1″,
“post_param_name_2″ : “post_param_value_2″,
“post_param_name_n” : “post_param_value_n”
},
file_types : “*.jpg;*.gif”, 允許上傳的檔案類型
file_types_description: “Web Image Files”, 檔案類型描述
file_size_limit : “1024″, 上傳檔案體積上限，單位MB
file_upload_limit : 10, 限定使用者一次性最多上傳多少個檔案，在上傳過程中，該數字會累加，如果設定為“0”，則表示沒有限制
file_queue_limit : 2, 上傳隊列數量限制，該項通常不需設定，會根據file_upload_limit自動賦值
flash_url : “http://www.swfupload.org/swfupload_f9.swf”, Flash控制項的URL
flash_width : “1px”,
flash_height : “1px”,
flash_color : “#FFFFFF”,
debug : false, 是否顯示調試資訊
swfupload_loaded_handler : swfupload_loaded_function, 當Flash控制項成功載入後觸發的事件處理函數
file_dialog_start_handler : file_dialog_start_function, 當檔案選取對話方塊彈出前出發的事件處理函數
file_queued_handler : file_queued_function,
file_queue_error_handler : file_queue_error_function,
file_dialog_complete_handler : file_dialog_complete_function, 當檔案選取對話方塊關閉後觸發的事件處理函數
upload_start_handler : upload_start_function, 開始上傳檔案前觸發的事件處理函數
upload_progress_handler : upload_progress_function,
upload_error_handler : upload_error_function,
upload_success_handler : upload_success_function, 檔案上傳成功後觸發的事件處理函數
upload_complete_handler : upload_complete_function,
debug_handler : debug_function,
custom_settings : { 自訂設定
custom_setting_1 : “custom_setting_value_1″,
custom_setting_2 : “custom_setting_value_2″,
custom_setting_n : “custom_setting_value_n”,
}
}
[編輯本段]SWFUpload中的File Object
在SWFUpload的使用過程中，無論在用戶端還是伺服器端都要和File Object打交道，在一個File Object中包含了以下內容：
{
id : string, // SWFUpload file id, used for starting or cancelling and upload
index : number, // The index of this file for use in getFile(i)
name : string, // The file name. The path is not included.
size : number, // The file size in bytes
type : string, // The file type as reported by the client operating system
creationdate : Date, // The date the file was created
modificationdate : Date, // The date the file was last modified
filestatus : number, // The file’s current status. Use SWFUpload.FILE_STATUS to interpret the value.
}

SWFUpload中的方法
+ setPostParams (param_object)
- 描述
動態修改SWFUpload初始化設定中的post_params屬性，其中所有的值都將被覆蓋。
- 參數
param_object:一個simple JavaScript object，所有的name/value都必須是字串，例如（this.setPostParams({ “Mari”: name });）。
- 返回
void

SWFUpload中的事件
SWFUpload在運行過程中提供了多種事件，這些事件可以讓開發人員藉助控制代碼來改變頁面UI、改變行為，或者報告錯誤。所有這些事件都可以在一個 SWFUpload實體中被調用，這意味著在這些事件對應的函數中，你可以用 this 關鍵字來代替引用SWFUpload實體。
+ fileDialogComplete (number of files selected)
- 觸發條件
1. 使用者選擇好了要上傳檔案，並關閉對話方塊；
2. 使用者什麼也沒選，並取消對話方塊；
如果你希望在使用者選擇完檔案後自動開始上傳操作，那麼可以將 this.startUpload() 操作放在這裡。
- 傳入參數
number of files selected：將返回使用者所選取的檔案個數。
+ uploadStart (file object)
- 觸發條件
該事件在檔案上傳之前觸發，它用於完成一些準備工作，比如傳遞參數；負責響應該事件的控制代碼函數可以有2個傳回值（true 或 false）當傳回值為false時，整個上傳將被取消；當傳回值為true時上傳過程繼續進行。而如果傳回值為false，則通常是由一個 uploadError事件所導致的。
註：官方協助文檔的原文中對該事件的描述中有這樣一句：“If you return ‘true’ or do not return any value then the upload proceeds.”，從中可以看到既定的設計是當不返回任何值的時候應該等同於返回true，但是筆者在開發中發現必須明確傳回值，否則上傳進程將停止 響應，不知是否是一個bug呢？
- 傳入參數
file object：檔案對象
+ uploadComplete (file object)
- 觸發條件
在完成一個上傳周期後（在uploadError 或 uploadSuccess之後），此時一個上傳操作已經結束，另一個上傳操作可以開始了。
- 傳入參數
file object：檔案對象
+ uploadProgress (file object, bytes complete, total bytes)
- 觸發條件
該事件在整個檔案的上傳過程中定期性的被Flash控制項自動觸發，用以協助開發人員即時更新頁面UI來製作上傳進度條。
注意：該事件在Linux版本的Flash Player中存在問題，目前還無法解決。
- 傳入參數
file object：檔案對象
bytes complete：已經上傳完畢的檔案位元組數
total bytes：檔案總體積的位元組數

常見錯誤
■ 所上傳的檔案體積並未超出SWFUpload所設定的數值，但為何無法成功上傳？
□ 通常這是由於伺服器端的限制所造成的，以Apache+PHP為例，請修改php.ini中的post_max_size與upload_max_filesize兩項設定。
■ 在帶有Session驗證的網站後台中SWFUpload無法正常工作？
□ 這是因為SWFUpload在上傳時相當於重新開闢了一個新的Session進程，因此無法與原有程式的Session保持一致，這就需要在上傳時傳遞原有程式的SessionID，根據它來“找回”其應有的Session。

上傳控制提示文字

先找到參數
upload_progress_handler

我的是

upload_progress_handler : uploadProgress
然後開啟handlers.js檔案。

尋找函數  “uploadProgress”

修改為：

代碼如下

複製代碼

function uploadProgress(file, bytesLoaded, bytesTotal) {   try { if(bytesLoaded == bytesTotal) { var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);   var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setProgress(percent); progress.setStatus("正在解壓，請稍等..."); } else { var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);   var progress = new FileProgress(file, this.customSettings.progressTarget); progress.setProgress(percent); progress.setStatus("正在上傳..."); } } catch (ex) { this.debug(ex); } }

自訂錯誤提示

由於swfupload會接受服務端返回的字串，利用這一點，在PHP檔案中，返回固定的字串。我返回的是的js數群組類型的字串：

?[Copy to clipboard]View Code PHP//出錯
die(json_encode(array(0 =&gt; "uploaderror",1 =&gt; "您沒有上傳許可權！")));
 
//上傳成功
die(json_encode(array(0 =&gt; "",1 =&gt; "")));
數組的第一個元素在js分支語句中會用到，第二個元素就是顯示的錯誤提示。
二、首先修改js
開啟handlers.js檔案，找到uploadSuccess函數。
原函數是

代碼如下

複製代碼

function uploadSuccess(file, serverData) {  try {   var progress = new FileProgress(file, this.customSettings.progressTarget);   progress.setComplete();   progress.setStatus("Complete.");   progress.toggleCancel(false);    } catch (ex) {   this.debug(ex);  } } 改為 function uploadSuccess(file, serverData) {    try {                 //接收服務端字串並轉為數群組類型   serverData = eval(serverData);     if(serverData[0] != ""){    //出錯    this.uploadError(file,serverData[0],serverData[1]);   }else{    //成功    var progress = new FileProgress(file, this.customSettings.progressTarget);    progress.setComplete();    progress.setStatus("上傳成功！");    progress.toggleCancel(false);   }      } catch (ex) {   this.debug(ex);  } } 再找到uploadError函數 原函數是 function uploadError(file, errorCode, message) {  try {   var progress = new FileProgress(file, this.customSettings.progressTarget);   progress.setError();   progress.toggleCancel(false);     switch (errorCode) {   case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:    progress.setStatus("Upload Error: " + message);    this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:    progress.setStatus("Configuration Error");    this.debug("Error Code: No backend file, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:    progress.setStatus("Upload Failed.");    this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.IO_ERROR:    progress.setStatus("Server (IO) Error");    this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:    progress.setStatus("Security Error");    this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:    progress.setStatus("Upload limit exceeded.");    this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:    progress.setStatus("File not found.");    this.debug("Error Code: The file was not found, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:    progress.setStatus("Failed Validation.  Upload skipped.");    this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:    if (this.getStats().files_queued === 0) {     document.getElementById(this.customSettings.cancelButtonId).disabled = true;    }    progress.setStatus("Cancelled");    progress.setCancelled();    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:    progress.setStatus("Stopped");    break;   default:    progress.setStatus("Unhandled Error: " + error_code);    this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   }  } catch (ex) {         this.debug(ex);     } } 改為 function uploadError(file, errorCode, message) {  try {   var progress = new FileProgress(file, this.customSettings.progressTarget);   progress.setError();   progress.toggleCancel(false);     switch (errorCode) {   case 'uploaderror':    progress.setStatus("上傳失敗:" + message);//自訂錯誤提示    this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:    progress.setStatus("Upload Error: " + message);    this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:    progress.setStatus("Configuration Error");    this.debug("Error Code: No backend file, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:    progress.setStatus("Upload Failed.");    this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.IO_ERROR:    progress.setStatus("Server (IO) Error");    this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:    progress.setStatus("Security Error");    this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:    progress.setStatus("Upload limit exceeded.");    this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:    progress.setStatus("File not found.");    this.debug("Error Code: The file was not found, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:    progress.setStatus("Failed Validation.  Upload skipped.");    this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:    if (this.getStats().files_queued === 0) {     document.getElementById(this.customSettings.cancelButtonId).disabled = true;     changeBtnClassName(this.customSettings.cancelButtonId,'btncanceldl');    }    progress.setStatus("Cancelled");    progress.setCancelled();    break;   case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:    progress.setStatus("Stopped");    break;   default:    progress.setStatus("Unhandled Error: " + error_code);    this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);    break;   }  } catch (ex) {         this.debug(ex);     } }

可以看出只是在switch結構中加了一個分支用處顯示上傳失敗的提示