什麼是SWFUpload?
SWFUpload是一個客戶端檔案上傳工具,最初由Vinterwebb.se開發,它通過整合Flash與JavaScript技術為WEB開發者提供了一個具有豐富功能繼而超越傳統<input type=”file” />標籤的檔案上傳模式。
編輯本段SWFUpload的主要特點
* 可以同時上傳多個檔案;
* 類似AJAX的無重新整理上傳;
* 可以顯示上傳進度;
* 良好的瀏覽器相容性;
* 相容其他JavaScript庫 (例如:jQuery, Prototype等);
* 支援Flash 8和Flash 9;
SWFUpload不同於其他基於Flash構建的上傳工具,它有著優雅的程式碼設計,開發者可以利用XHTML、CSS和JavaScript來隨心所欲的定製它在瀏覽器下的外觀;它還提供了一組簡明的JavaScript事件,藉助它們開發者可以方便的在檔案上傳過程中更新頁面內容來營造各種動態效果。
在使用SWFUpload之前,請確認你具備一定的JavaScript和DOM知識。在實際開發中,大部分的錯誤都是由於錯誤的設定和低劣的Event Handlers處理程式所造成的。
編輯本段效果演示
* Classic Form Demo http://demo.swfupload.org/v220/formsdemo/index.php ;
* Features Demo http://demo.swfupload.org/v220/featuresdemo/index.php ;
* Application Demo http://demo.swfupload.org/v220/applicationdemo/index.php ;
* SWFObject Plugin Demo http://demo.swfupload.org/v220/swfobjectdemo/index.php ;
編輯本段選擇合適的Flash控制元件
在發行包(SWFUpload v2)中含有2個版本的Flash控制元件(swfupload_f8.swf 與swfupload_f9.swf),其中第一個版本擁有最佳的相容性,但是為此損失了部分功能;而第二個版本提供了一些附加的功能但是損失了相容性。
編輯本段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。
■ 關於swfupload上傳中文檔名亂碼的問題
□ 實際上是由於編碼的問題造成的,程式使用的utf-8,檔名傳遞時也是這種編碼,因此造成亂碼或檔案不能儲存,僅是需要修改接收檔案,以PHP為例,upload.php中
$file_name = $_FILES[$upload_name][`name`];
$file_name=iconv(“UTF-8″,”GB2312”,$file_name);
這樣即可解決。