SWFUpload上傳組件詳細文檔

網上的例子介紹的文檔真的很多。下面簡單介紹一下

SWFUpload的文件上傳流程是這樣的:

1、引入相應的js文件
2、實例化SWFUpload對象,傳入一個配置參數對象進行各方面的配置。
3、點擊SWFUpload提供的Flash按鈕,彈出文件選取窗口選擇要上傳的文件;
4、文件選取完成後符合規定的文件會被添加到上傳的隊列裏;
5、調用startUpload方法讓隊列裏文件開始上傳;
6、文件上傳過程中會觸發相應的事件,開發者利用這些事件來更新ui、處理錯誤、發出提示等等;

SWFUpload包括三部分的內容:SWFUpload.js、swfupload.swf、初始化配置參數及各種事件處理函數。所以首先在頁面引入SWFUpload.js

Java代碼  收藏代碼
  1. <script src='SWFUpload.js'></script>  



然後在頁面中實例化一個SWFUpload對象:

 

Java代碼  收藏代碼
  1. var swfu;  
  2. window.onload = function () {  
  3. var settings_object = {//定義參數配置對象  
  4. upload_url : "http://www.swfupload.org/upload.php",  
  5. flash_url : "http://www.swfupload.org/swfupload.swf",  
  6. file_post_name : "Filedata",  
  7. post_params : {  
  8. "post_param_name_1" : "post_param_value_1",  
  9. "post_param_name_2" : "post_param_value_2",  
  10. "post_param_name_n" : "post_param_value_n"  
  11. },  
  12. use_query_string : false,  
  13. requeue_on_error : false,  
  14. http_success : [201202],  
  15. assume_success_timeout : 0,  
  16. file_types : "*.jpg;*.gif",  
  17. file_types_description: "Web Image Files",  
  18. file_size_limit : "1024",  
  19. file_upload_limit : 10,  
  20. file_queue_limit : 2,  
  21. debug : false,  
  22. prevent_swf_caching : false,  
  23. preserve_relative_urls : false,  
  24. button_placeholder_id : "element_id",  
  25. button_image_url : "http://www.swfupload.org/button_sprite.png",  
  26. button_width : 61,  
  27. button_height : 22,  
  28. button_text : "<b>Click</b> <span class="redText">here</span>",  
  29. button_text_style : ".redText { color: #FF0000; }",  
  30. button_text_left_padding : 3,  
  31. button_text_top_padding : 2,  
  32. button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,  
  33. button_disabled : false,  
  34. button_cursor : SWFUpload.CURSOR.HAND,  
  35. button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,  
  36. swfupload_loaded_handler : swfupload_loaded_function,  
  37. file_dialog_start_handler : file_dialog_start_function,  
  38. file_queued_handler : file_queued_function,  
  39. file_queue_error_handler : file_queue_error_function,  
  40. file_dialog_complete_handler : file_dialog_complete_function,  
  41. upload_start_handler : upload_start_function,  
  42. upload_progress_handler : upload_progress_function,  
  43. upload_error_handler : upload_error_function,  
  44. upload_success_handler : upload_success_function,  
  45. upload_complete_handler : upload_complete_function,  
  46. debug_handler : debug_function,  
  47. };  
  48. swfu = new SWFUpload(settings_object);//實例化一個SWFUpload,傳入參數配置對象  
  49. };  
  50. /*定義各種事件監聽函數*/  
  51. function swfupload_loaded_function(){}  
  52. function file_dialog_start_function(){}  
  53. //...等等  



我們看到要實現一個SWFUpload上傳功能很簡單,就是實例化一個SWFUpload對象。但繁瑣的地方就在於實例化實要用到 的參數配置對象,以及各種事件的發生時機以和提供的參數。所以重點來了。下面幾個表格對開發中要用到的東西列舉了出來,雖然已經蠻多了,但並不是 SWFUpload的全部,我列出來的只是常用的。要查看完整的文檔,請到SWFUpload官網上查詢。


(一)、配置參數對象中的常用屬性及說明 
 

屬性

類型

默認值

描述

upload_url

String

 

處理上傳文件的服務器端頁面的url地址,可以是絕對地址,也可以是相對地址,當爲相對地址時相對的是當前代碼所在的文檔地址

preserve_relative_urls

Boolean

false

如果爲falseSWFUpload會把swfupload.swf用到的相對地址轉換爲絕對地址,以達到更好的兼容性

file_post_name

String

Filedata

相當於用普通的文件域上傳文件時的name屬性,服務器端接收頁面通過該名稱來獲取上傳的文件

post_params

Object(直接量)

 

一個對象直接量,裏面的鍵/值對會隨着每一個文件一起上傳,文件上傳要附加一些信息時很有用

use_query_string

Boolean

false

false,post_params屬性定義的參數會以post方式上傳;爲true時,則會以get方式上傳(即參數會以查詢字符串的形式附加到url後面)

file_types

String

 

該屬性指定了允許上傳的文件類型,當有多個類型時使用分號隔開,比如:*.jpg;*.png ,允許所有類型時請使用 *.*

file_types_description

String

 

指定在文件選取窗口中顯示的文件類型描述,起一個提示和說明的作用吧

file_size_limit

String

 

指定要上傳的文件的最大體積,可以帶單位,合法的單位有:BKBMBGB,如果省略了單位,則默認爲KB。該屬性爲0時,表示不限制文件的大小。

file_upload_limit

Number

 

指定最多能上傳多少個文件,當上傳成功的文件數量達到了這個最大值後,就不能再上傳文件了,也不能往上傳隊列裏添加文件了。把該屬性設爲0時表示不限制文件的上傳數量。

file_queue_limit

Number

 

指定文件上傳隊列裏最多能同時存放多少個文件。當超過了這個數目後只有當隊列裏有文件上傳成功、上傳出錯或被取消上傳後,等同數量的其他文件纔可以被添加進來。當file_upload_limit的數值或者剩餘的能上傳的文件數量小於file_queue_limit時,則取那個更小的值

flash_url

String

 

swfupload.swf文件的絕對或相對地址,相對地址是指相對於當前的頁面地址。實例化swfupload後,就不能再改變該屬性的值了。

prevent_swf_caching

Boolean

 

true時會加一個隨機數在swfupload.swf地址的後面,以阻止flash影片被緩存,這是爲了防止某些版本的IE瀏覽器在讀取緩存的falsh影片時出現的bug

button_placeholder_id

String

 

指定一個dom元素的id,dom元素在swfupload實例化後會被Flash按鈕代替,這個dom元素相當於一個佔位符

button_placeholder

DOMElement

 

指定一個dom元素,dom元素在swfupload實例化後會被Flash按鈕代替,這個dom元素相當於一個佔位符。當button_placeholder_idbutton_placeholder都存在時,以button_placeholder_id爲優先

button_image_url

String

 

指定Flash按鈕的背景圖片,相對地址或絕對地址都可以。該地址會受到preserve_relative_urls屬性的影響,遵從與upload_url一樣的規則。
該背景圖片必須是一個sprite圖片,從上到下包含了Flash按鈕的正常、鼠標懸停、按下、禁用這四種狀態。因此該圖片的高度應該是Flash按鈕高度的四倍

button_width

Number

 

指定Flash按鈕的寬度

button_height

Number

 

指定Flash按鈕的高度,應該爲button_image_url所指定的按鈕背景圖片高度的1/4

button_text

String

 

指定Flash按鈕上的文字,也可以是html代碼

button_text_style

String

 

Flash按鈕上的文字的樣式,使用方法見示例

button_text_top_padding

Number

 

指定Flash按鈕頂部的內邊距,可使用負值

button_text_left_padding

Number

 

指定Flash按鈕左邊的內邊距,可使用負值

button_disabled

Boolean

false

trueFlash按鈕將變爲禁用狀態,點擊也不會觸發任何行爲

button_cursor

 

 

指定鼠標懸停在Flash按鈕上時的光標樣式,可用值爲SWFUpload.CURSOR裏定義的常量

button_window_mode

 

 

指定Flash按鈕的WMODE屬性,可用值爲SWFUpload.WINDOW_MODE裏定義的常量

file_dialog_start_handler

Function

 

fileDialogStart事件偵聽函數

file_queued_handler

Function

 

fileQueued事件偵聽函數

file_queue_error_handler

Function

 

fileQueueError事件偵聽函數

file_dialog_complete_handler

Function

 

fileDialogComplete事件偵聽函數

upload_start_handler

Function

 

uploadStart事件偵聽函數

upload_progress_handler

Function

 

uploadProgress事件偵聽函數

upload_error_handler

Function

 

uploadError事件偵聽函數

upload_success_handler

Function

 

uploadSuccess事件偵聽函數

upload_complete_handler

Function

 

uploadComplete事件偵聽函數

 

(二)、各種事件說明

要實現與用戶的交互,靠的就是在這些事件上做文章了

 

fileDialogStart ( )

在文件選取窗口將要彈出時觸發

fileQueued ( file object )

當一個文件被添加到上傳隊列時會觸發此事件,提供的唯一參數爲包含該文件信息的file object對象

fileQueueError ( file object, error code, message )

當文件添加到上傳隊列失敗時觸發此事件,失敗的原因可能是文件大小超過了你允許的數值、文件是空的或者文件隊列已經滿員了等。
該事件提供了三個參數。第一個參數是當前出現問題的文件對象,第二個參數是具體的錯誤代碼,可以參照SWFUpload.QUEUE_ERROR中定義的常量

fileDialogComplete ( number of files selected, number of files queued, total number of files in the queued )

當文件選取完畢且選取的文件經過處理後(指添加到上傳隊列),會立即觸發該事件。可以在該事件中調用this.startUpload()方法來實現文件的自動上傳
參數number of files selected指本次在文件選取框裏選取的文件數量
參數number of files queued指本次被添加到上傳隊列的文件數量
參數total number of files in the queued指當前上傳隊列裏共有多少個文件(包括了本次添加進去的文件)

uploadStart ( file object )

當文件即將上傳時會觸發該事件,該事件給了你在文件上傳前的最後一次機會來驗證文件信息、增加要隨之上傳的附加信息或做其他工作。可以通過返回false來取消本次文件的上傳
參數file object爲當前要上傳的文件的信息對象

uploadProgress ( file object, bytes complete, total bytes )

該事件會在文件的上傳過程中反覆觸發,可以利用該事件來實現上傳進度條
參數file object爲文件信息對象
參數bytes complete爲當前已上傳的字節數
參數total bytes爲文件總的字節數

uploadError ( file object, error code, message )

文件上傳被中斷或是文件沒有成功上傳時會觸發該事件。停止、取消文件上傳或是在uploadStart事件中返回false都會引發這個事件,但是如果某個文件被取消了但仍然還在隊列中則不會觸發該事件
參數file object爲文件信息對象
參數error code爲錯誤代碼,具體的可參照SWFUpload.UPLOAD_ERROR中定義的常量

uploadSuccess ( file object, server data, received response )

當一個文件上傳成功後會觸發該事件
參數file object爲文件信息對象
參數server data爲服務器端輸出的數據

uploadComplete( file object )

當一次文件上傳的流程完成時(不管是成功的還是不成功的)會觸發該事件,該事件表明本次上傳已經完成,上傳隊列裏的下一個文件可以開始上傳了。該事件發生後隊列中下一個文件的上傳將會開始

 

(三)、swfupload實例的方法

 

方法中大多數是動態改變參數配置對象的方法

 

destroy ( )

當不需要再使用SWFUpload了的時候,可以使用該方法來銷燬它的實例和dom元素

startUpload( file_id )

開始上傳隊列中指定的文件
參數file_id代表要上傳的文件的id,如果未填寫這個參數,則會上傳隊列中第一個文件

cancelUpload ( file_id, trigger_error_event )

取消文件的上傳
參數file_id爲要取消的文件的id,如果該參數爲undefined或者未填寫,則會取消隊列裏的第一個文件
參數trigger_error_event接受一個布爾值,當爲false時取消文件不會觸發uploadError事件,默認爲true

stopUpload ( )

終止當前正在上傳的文件,會觸發uploadError事件。如果當前沒有文件在上傳,則該方法什麼都不會做

getStats ( )

獲取隊列的stats object

setStats ( stats_object )

修改隊列的stats_object,傳入修改過的stats_object作爲參數

getFile ( file_id|index )

根據文件id或文件索引來獲取一個File Object,當使用文件id時只能獲得隊列裏的文件,當使用文件索引時所有文件(包括隊列內和隊列外)都可獲得

addPostParam ( name, value)

往配置對象中post_params指定的附加信息對象中增加鍵/值對

removePostParam ( name)

移除置配置對象中的post_params包含的某一個鍵/值對,參數name爲要移除的值的鍵名

addFileParam ( file_id, name, value)

爲某個特定文件增加隨之一起上傳的附加信息。注意,只有在該指定的文件上傳時,附加的信息纔會一起上傳。而配置對象中post_param設置的附加信息在任一文件上傳時都會與之一起發送。
參數file_id爲要指定的文件id,參數namevalue分別爲附加信息的名稱和值

removeFileParam ( file_id, name)

移除通過addFileParam方法增加的附加信息,兩個參數相信就不用我多講了吧

setUploadURL ( url)

動態設置配置對象中upload_url的值

setPostParams ( param_object)

動態設置配置對象中post_params屬性的值,新的值會覆蓋舊的值。
參數param_object必須爲一個對象直接量,且裏面的屬性和值都只能爲字符串

setFileTypes ( types, description)

動態設置配置對象中file_types file_types_description屬性的值。兩個參數都不能省略

setFileSizeLimit ( file_size_limit)

動態設置配置對象中file_size_limit屬性的值

setFileUploadLimit ( file_upload_limit)

動態設置配置對象中file_upload_limit屬性的值

setFileQueueLimit ( file_queue_limit)

動態設置配置對象中file_queue_limit屬性的值

setFilePostName ( file_post_name)

動態設置配置對象中file_post_name屬性的值

setUseQueryString ( use_query_string)

動態設置配置對象中use_query_string屬性的值

setButtonImageURL ( url)

動態設置配置對象中button_image_url屬性的值

setButtonDimensions ( width, height)

動態設置Flash按鈕的寬度和高度,兩個參數分別爲寬度和高度的值,類型爲數字,且不能帶單位

setButtonText ( text)

動態設置配置對象中button_text屬性的值

setButtonTextStyle ( css_style_text)

動態設置配置對象中button_text_style屬性的值

setButtonTextPadding ( left, top )

動態設置Flash按鈕的左邊內邊距和頂部內邊距

setButtonDisabled ( isDisabled )

動態對Flash按鈕進行禁用和不禁用的操作,參數爲一個布爾值

setButtonCursor ( buttonCursor )

動態設置配置對象中button_cursor的值

 

(四)、文件信息對象 File Object

 

在事件監聽函數中,經常要用到文件信息對象來獲取文件的信息以供下一步的操作

 

屬性

類型

描述

id

String

SWFUpload定義的文件id,用來控制文件的上傳

index

Number

文件的索引,用在getFile(i)方法中

name

String

文件的原始名稱,不包括路徑

type

String

文件類型

creationdate

Date

文件的創建日期

modificationdate

Date

文件的最後修改日期

filestatus

Number

當前文件的狀態,詳細的請參照SWFUpload.FILE_STATUS中定義的常量

 

(五)、隊列狀態對象 Stats Object

 

用來獲取當前隊列的狀況

 

屬性

類型

描述

in_progress

Number

得到的值爲10,表明當前隊列是否有文件正在上傳中

files_queued

Number

目前上傳隊列中的文件數量

successful_uploads

Number

已成功上傳(指觸發了uploadSuccess事件)的文件數量

upload_errors

Number

上傳失敗的文件數量(包括被取消上傳的文件)

upload_cancelled

Number

被取消上傳的文件數量

queue_errors

Number

觸發了fileQueueError事件的文件數量

 

(六)、一些常量

 

定義的一些常量,便於理解

 

常量名

描述

SWFUpload.instances

該常量是一個對象,代表一個頁面上所有的SWFUpload實例的引用的集合,用SWFUpload實例的movieName屬性進行索引

SWFUpload.movieCount

頁面上存在的SWFUpload實例的數量

 

 

SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED

用戶選取的文件超過了允許的數量

SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT

文件的體積超過了允許的大小

SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE

文件是空的

SWFUpload.QUEUE_ERROR.INVALID_FILETYPE

不允許的文件類型

 

 

SWFUpload.UPLOAD_ERROR.HTTP_ERROR

服務器返回的狀態碼不是200

SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL

沒有設置 upload_url

SWFUpload.UPLOAD_ERROR.IO_ERROR

讀取或傳輸文件時發生錯誤

SWFUpload.UPLOAD_ERROR.SECURITY_ERROR

上傳受到了安全方面的限制

SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED

上傳的文件數量超過了允許的最大值

SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED

上傳出現錯誤

SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND

startUpload()方法傳入的文件id不存在

SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED

uploadStart()方法中返回了false

SWFUpload.UPLOAD_ERROR.FILE_CANCELLED

上傳被取消了

SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED

上傳被終止了

 

 

SWFUpload.FILE_STATUS.QUEUED

文件正在隊列中等待上傳

SWFUpload.FILE_STATUS.IN_PROGRESS

文件正在上傳

SWFUpload.FILE_STATUS.ERROR

文件在添加到隊列或是上傳的時候出現了錯誤

SWFUpload.FILE_STATUS.COMPLETE

文件已上傳成功

SWFUpload.FILE_STATUS.

文件被取消上傳

 

 

SWFUpload.CURSOR.ARROW

鼠標以箭頭顯示

SWFUpload.CURSOR.HAND

鼠標以手形顯示

 

 

SWFUpload.WINDOW_MODE.WINDOW

Flash按鈕會顯示在頁面的所有dom元素上面

SWFUpload.WINDOW_MODE.OPAQUE

允許其他dom元素覆蓋住Flash按鈕

SWFUpload.WINDOW_MODE.TRANSPARENT

允許Flash按鈕透明顯示

 

 

官方站點:http://www.swfupload.org/
DEMO地址:http://demo.swfupload.org/

 

SWFUplaod學習筆記閱讀順序
一、瞭解SWFUpload 
http://hanxin0311.iteye.com/blog/1915611

二、詳細介紹SWFUpload
http://hanxin0311.iteye.com/blog/1915615

三、struts2+swfUpload簡單例子
http://hanxin0311.iteye.com/blog/1915626

四、struts2+swfUpload深度整合
http://hanxin0311.iteye.com/blog/1915628

SWFUpload像服務器傳遞參數
http://hanxin0311.iteye.com/blog/1913946

SWFUpload接受服務器Action返回的參數
http://hanxin0311.iteye.com/blog/1915644

SWFUpload中文亂碼問題
http://hanxin0311.iteye.com/blog/1915648

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章