一、簡介和示例
SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS。
官方站點：http://www.swfupload.org/
簡單來說，swfupload這個上傳庫是可以顯示上傳進度以及上傳速度等上傳信息。一般實現這種上傳體驗有2種方式，一種是異步上傳，在服務器端邊接收數據邊往session寫入接收的字節數和進度數據，然后客戶端輪詢這個記錄在session的進度數據并回顯到頁面。第二種方式就是采用flash來上傳，也就是swfupload所采用的方式，在發送過程中將發送的相關狀態數據回傳到js的函數中處理。
下面是一個單個 文件上傳 的使用示例，簡單的創建一個SWFUpload對象，并傳入相關的事件處理和參數就可以了：
01
|
????????
var
swfu;
|
02
|
????????
window.onload =
function
() {
|
03
|
????????????
swfu =
new
SWFUpload({
|
04
|
????????????????
// Backend settings
|
05
|
????????????????
upload_url:
"/upload"
,
|
06
|
????????????????
file_post_name:
"image"
,
|
07
|
????????????????
// Flash file settings
|
08
|
????????????????
file_size_limit :
"10 MB"
,
|
09
|
????????????????
file_types :
"*.*"
,????????
// or you could use something like: "*.doc;*.wpd;*.pdf",
|
10
|
????????????????
file_types_description :
"All Files"
,
|
11
|
????????????????
file_upload_limit :
"0"
,
|
12
|
????????????????
file_queue_limit :
"5"
,
|
13
|
????????????????
// Event handler settings
|
14
|
????????????????
swfupload_loaded_handler : swfUploadLoaded,
|
15
|
?
?
|
16
|
????????????????
file_dialog_start_handler: fileDialogStart,
|
17
|
????????????????
file_queued_handler : fileQueued,
|
18
|
????????????????
file_queue_error_handler : fileQueueError,
|
19
|
????????????????
file_dialog_complete_handler : fileDialogComplete,
|
20
|
?
?
|
21
|
????????????????
//upload_start_handler : uploadStart,?? // I could do some client/JavaScript validation here, but I don't need to.
|
22
|
????????????????
upload_progress_handler : uploadProgress,
|
23
|
????????????????
upload_error_handler : uploadError,
|
24
|
????????????????
upload_success_handler : uploadSuccess,
|
25
|
????????????????
upload_complete_handler : uploadComplete,
|
26
|
????????????????
// Button Settings
|
27
|
????????????????
button_image_url :
"/static/images/XPButtonUploadText_61x22.png"
,
|
28
|
????????????????
button_placeholder_id :
"spanButtonPlaceholder"
,
//flash元素要替代的html元素
|
29
|
????????????????
button_width: 61,
|
30
|
????????????????
button_height: 22,
|
31
|
?
?
|
32
|
????????????????
// Flash Settings
|
33
|
????????????????
flash_url :
"/static/swf/swfupload.swf"
,
|
34
|
????????????????
custom_settings : {
|
35
|
????????????????????
progress_target :
"fsUploadProgress"
,
|
36
|
????????????????????
upload_successful :
false
|
37
|
????????????????
},
|
38
|
}
|
?
二、參數說明
原理是很明顯易懂的，關鍵是flash和javascript的通訊部分，在 文件上傳 的各個狀態都會有javascript和flash函數的相互回調。目前主要研究了上傳單個文件的上傳邏輯，swfupload支持多個 文件上傳 的，不過核心的邏輯應該是沒有太多的變化。swfupload用一個隊列來管理多個 文件上傳 的，因為在傳入的參數中會有一些隊列和 文件上傳 數量相關的參數。
在其核心的JavaScript文件swfupload.js定義的狀態碼以及從flash傳遞到js的文件對象：
01
|
//文件對象
|
02
|
file = {
|
03
|
????
"id"
:SWFUpload_0_0,
|
04
|
????
"index"
:0,
|
05
|
????
"filestatus"
:-1,
|
06
|
????
"name"
:vim-cheat-sheet-diagram.png,
|
07
|
????
"size"
:317949,
|
08
|
????
"type"
:
""
,
|
09
|
????
"creationdate"
:Fri Jan 16 1970 00:08:13 GMT+0800 (CST),
|
10
|
????
"modficationdate"
:Fri Jan 16 1970 00:08:13 GMT+0800 (CST),
|
11
|
????
"post"
: {}
|
12
|
}
|
13
|
?
?
|
14
|
//文件隊列錯誤碼
|
15
|
SWFUpload.QUEUE_ERROR = {
|
16
|
????
QUEUE_LIMIT_EXCEEDED??????????? : -100,
|
17
|
????
FILE_EXCEEDS_SIZE_LIMIT???????? : -110,
|
18
|
????
ZERO_BYTE_FILE????????????????? : -120,
|
19
|
????
INVALID_FILETYPE??????????????? : -130
|
20
|
};
|
21
|
?
?
|
22
|
//上傳錯誤碼
|
23
|
SWFUpload.UPLOAD_ERROR = {
|
24
|
????
HTTP_ERROR????????????????????? : -200,
|
25
|
????
MISSING_UPLOAD_URL????????????? : -210,
|
26
|
????
IO_ERROR??????????????????????? : -220,
|
27
|
????
SECURITY_ERROR????????????????? : -230,
|
28
|
????
UPLOAD_LIMIT_EXCEEDED?????????? : -240,
|
29
|
????
UPLOAD_FAILED?????????????????? : -250,
|
30
|
????
SPECIFIED_FILE_ID_NOT_FOUND???? : -260,
|
31
|
????
FILE_VALIDATION_FAILED????????? : -270,
|
32
|
????
FILE_CANCELLED????????????????? : -280,
|
33
|
????
UPLOAD_STOPPED????????????????? : -290
|
34
|
};
|
35
|
?
?
|
36
|
//文件狀態
|
37
|
SWFUpload.FILE_STATUS = {
|
38
|
????
QUEUED?????? : -1,
|
39
|
????
IN_PROGRESS? : -2,
|
40
|
????
ERROR??????? : -3,
|
41
|
????
COMPLETE???? : -4,
|
42
|
????
CANCELLED??? : -5
|
43
|
};
|
44
|
?
?
|
45
|
//按鈕的動作
|
46
|
SWFUpload.BUTTON_ACTION = {
|
47
|
????
SELECT_FILE? : -100,
|
48
|
????
SELECT_FILES : -110,
|
49
|
????
START_UPLOAD : -120
|
50
|
};
|
1. 事件處理函數
| 事件函數 | 觸發時間 | 參數 |
| swfupload_loaded_handler | 在flash初始化完成之后 | 沒有參數 |
| file_dialog_start_handler | 當用戶點擊上傳按鈕，在打開文件瀏覽窗口之前 | 沒有參數 |
| file_queued_handler | 用戶成功地選擇了文件，在file_dialog_complete_handler事件之前觸發。如果選擇了多個文件，則觸發多次 | file文件對象 |
| file_queue_error_handler | 文件上傳 數量、類型、大小不符合時 | file文件對象、錯誤碼、從flash中返回的錯誤信息 |
| file_dialog_complete_handler | 在用戶成功了選擇了文件后，在所有file_queued_handler之后觸發 | 選擇文件的數量、加入了文件隊列的文件數量、在當前文件隊列總共的文件數量 |
| upload_start_handler | 用戶點擊了提交按鈕，開始把 文件上傳 到服務器 | file文件對象 |
| upload_progress_handler | 剛打開與服務器的連接與 文件上傳 過程中 | file文件對象、已經上傳的字節數、總共要上傳的字節數 |
| upload_error_handler | 上傳失敗時 | file文件對象、錯誤碼、從flash中返回的錯誤信息 |
| upload_success_handler | 文件上傳 成功或者等待服務器數據返回超時 | file文件對象、服務器返回的數據、服務器是否有返回數據 |
| upload_complete_handler | 上傳完成時，在upload_success_handler之后觸發 | file文件對象 |
| debug_handler | 調用SWFUpload對象的debug()函數時 | swfupload對象和其初始化的參數 |
2. 其他重要參數
| 參數名 | 意義 | 說明 |
| upload_url | 要上傳到的服務器地址 | ? |
| file_post_name | 上傳到服務器中文件內容對應的key | ? |
| flash_url | flash元素的url | ? |
| custom_settings | 自定義的參數，可以在事件處理函數中獲取得到 | dict類型 |
| button_placeholder_id | flash的上傳按鈕顯示在html的位置，此名稱的元素會被替換成object元素 | span即可 |
三、上傳邏輯
下面是用graphviz畫出來的流程圖，圖比較大，不過看得舒服:)
1. 如上面的示例代碼所示，在javascript代碼中首先要創建一個SWFUpload的javascript對象，這個對象創建的初始化邏輯如下（箭頭表示邏輯和流程的走向）：
2. 當javascript將object元素添加到html頁面的元素中時，即初始化flash中的元素：
3.用戶點擊上傳的按鈕，準備選擇文件時，這個已經綁定了按鈕的點擊事件，而這個按鈕不是input而是一個flash的元素：
4.用戶選擇完文件后：
5. 用戶點擊提交按鈕，文件開始上傳到服務器：
6.
文件上傳
過程中的一些事件處理邏輯：
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
