SWFUpload

  

什麼是SWFUpload?

  SWFUpload是一個客戶端文件上傳工具,最初由Vinterwebb.se開發,它通過整合FlashJavaScript技術爲WEB開發者提供了一個具有豐富功能繼而超越傳統<input type="file" />標籤的文件上傳模式。

SWFUpload的主要特點

  * 可以同時上傳多個文件;
  * 類似AJAX的無刷新上傳;
  * 可以顯示上傳進度;
  * 良好的瀏覽器兼容性;
  * 兼容其他JavaScript庫 (例如:jQuery, Prototype等);
  * 支持Flash 8和Flash 9;
  SWFUpload不同於其他基於Flash構建的上傳工具,它有着優雅的代碼設計,開發者可以利用XHTMLCSS和JavaScript來隨心所欲的定製它在瀏覽器下的外觀;它還提供了一組簡明的JavaScript事件,藉助它們開發者可以方便的在文件上傳過程中更新頁面內容來營造各種動態效果。
  在使用SWFUpload之前,請確認你具備一定的JavaScript和DOM知識。在實際開發中,大部分的錯誤都是由於錯誤的設置和低劣的Event Handlers處理程序所造成的。

效果演示

  * Classic Form Demo http://demo.swfupload.org/formsdemo ;
  * Features Demo http://demo.swfupload.org/featuresdemo ;
  * Application Demo http://demo.swfupload.org/applicationdemo ;
  * v1.0.2 Plugin Demo http://demo.swfupload.org/v102demo ;

選擇合適的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_sizeupload_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);
  這樣即可解決。
發佈了115 篇原創文章 · 獲贊 8 · 訪問量 42萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章