文件上傳插件SWFUpload的使用指南
更新時間：2016年11月29日 14:39:13 作者：無雙
本文主要介紹了文件上傳插件SWFUpload使用指南,SWFUpload是一個flash和js相結(jié)合而成的文件上傳插件，其功能非常強(qiáng)大。需要的朋友可以參考下
SWFUpload是一個flash和js相結(jié)合而成的文件上傳插件，其功能非常強(qiáng)大。以前在項目中用過幾次，但它的配置參數(shù)太多了，用過后就忘記怎么用了，到以后要用時又得到官網(wǎng)上看它的文檔，真是太煩了。所以索性就把它的用法記錄下來，也方便英語拙計的同學(xué)查看，利人利己，一勞永逸。(ps：SWFUpload早就不再更新了，官網(wǎng)也打不開了，推薦大家使用Plupload來代替SWFUpload，Plupload以html5上傳方式為主，在不支持html5的瀏覽器中會自動回退到flash的上傳方式，功能灰常強(qiáng)大！使用方法可以看我寫的《前端上傳組件Plupload使用指南》)
SWFUpload的特點：
1、用flash進(jìn)行上傳，頁面無刷新，且可自定義Flash按鈕的樣式;
2、可以在瀏覽器端就對要上傳的文件進(jìn)行限制;
3、允許一次上傳多個文件，但會有一個上傳隊列，隊列里文件的上傳是逐個進(jìn)行的，服務(wù)器端接收文件時跟普通的表單上傳文件是一樣的;
4、提供了豐富的事件接口供開發(fā)者使用;
SWFUpload的文件上傳流程是這樣的：
1、引入相應(yīng)的js文件
2、實例化SWFUpload對象，傳入一個配置參數(shù)對象進(jìn)行各方面的配置。
3、點擊SWFUpload提供的Flash按鈕，彈出文件選取窗口選擇要上傳的文件；
4、文件選取完成后符合規(guī)定的文件會被添加到上傳的隊列里；
5、調(diào)用startUpload方法讓隊列里文件開始上傳；
6、文件上傳過程中會觸發(fā)相應(yīng)的事件，開發(fā)者利用這些事件來更新ui、處理錯誤、發(fā)出提示等等；
SWFUpload包括三部分的內(nèi)容：SWFUpload.js、swfupload.swf、初始化配置參數(shù)及各種事件處理函數(shù)。所以首先在頁面引入SWFUpload.js
<script src='SWFUpload.js'></script>
然后實例化一個SWFUpload對象：
var swfu;
window.onload = function () {
var settings_object = {//定義參數(shù)配置對象
upload_url : "http://www.swfupload.org/upload.php",
flash_url : "http://www.swfupload.org/swfupload.swf",
file_post_name : "Filedata",
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"
},
use_query_string : false,
requeue_on_error : false,
http_success : [201, 202],
assume_success_timeout : 0,
file_types : "*.jpg;*.gif",
file_types_description: "Web Image Files",
file_size_limit : "1024",
file_upload_limit : 10,
file_queue_limit : 2,
debug : false,
prevent_swf_caching : false,
preserve_relative_urls : false,
button_placeholder_id : "element_id",
button_image_url : "http://www.swfupload.org/button_sprite.png",
button_width : 61,
button_height : 22,
button_text : "<b>Click</b> <span class="redText">here</span>",
button_text_style : ".redText { color: #FF0000; }",
button_text_left_padding : 3,
button_text_top_padding : 2,
button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,
button_disabled : false,
button_cursor : SWFUpload.CURSOR.HAND,
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
swfupload_loaded_handler : swfupload_loaded_function,
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,
};
swfu = new SWFUpload(settings_object);//實例化一個SWFUpload，傳入?yún)?shù)配置對象
};
/*定義各種事件監(jiān)聽函數(shù)*/
function swfupload_loaded_function(){}
function file_dialog_start_function(){}
...等等
我們看到要實現(xiàn)一個swfupload上傳功能很簡單，就是實例化一個swfupload對象。但繁瑣的地方就在于實例化實要用到的參數(shù)配置對象，以及各種事件的發(fā)生時機(jī)以和提供的參數(shù)。所以重點來了。下面幾個表格對開發(fā)中要用到的東西列舉了出來，雖然已經(jīng)蠻多了，但并不是swfupload的全部，我列出來的只是常用的。要查看完整的文檔，請到swfupload官網(wǎng)上查詢。
一、配置參數(shù)對象中的常用屬性及說明
| 屬性 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| upload_url | String | 處理上傳文件的服務(wù)器端頁面的url地址，可以是絕對地址，也可以是相對地址，當(dāng)為相對地址時相對的是當(dāng)前代碼所在的文檔地址 | |
| preserve_relative_urls | Boolean | false | 如果為false則SWFUpload會把swfupload.swf用到的相對地址轉(zhuǎn)換為絕對地址，以達(dá)到更好的兼容性 |
| file_post_name | String | Filedata | 相當(dāng)于用普通的文件域上傳文件時的name屬性，服務(wù)器端接收頁面通過該名稱來獲取上傳的文件 |
| post_params | Object(直接量) | 一個對象直接量，里面的鍵/值對會隨著每一個文件一起上傳，文件上傳要附加一些信息時很有用 | |
| use_query_string | Boolean | false | 為false時,post_params屬性定義的參數(shù)會以post方式上傳；為true時，則會以get方式上傳（即參數(shù)會以查詢字符串的形式附加到url后面） |
| file_types | String | 該屬性指定了允許上傳的文件類型，當(dāng)有多個類型時使用分號隔開，比如：*.jpg;*.png ,允許所有類型時請使用 *.* | |
| file_types_description | String | 指定在文件選取窗口中顯示的文件類型描述，起一個提示和說明的作用吧 | |
| file_size_limit | String | 指定要上傳的文件的最大體積，可以帶單位，合法的單位有:B、KB、MB、GB，如果省略了單位，則默認(rèn)為KB。該屬性為0時，表示不限制文件的大小。 | |
| file_upload_limit | Number | 指定最多能上傳多少個文件，當(dāng)上傳成功的文件數(shù)量達(dá)到了這個最大值后，就不能再上傳文件了，也不能往上傳隊列里添加文件了。把該屬性設(shè)為0時表示不限制文件的上傳數(shù)量。 | |
| file_queue_limit | Number | 指定文件上傳隊列里最多能同時存放多少個文件。當(dāng)超過了這個數(shù)目后只有當(dāng)隊列里有文件上傳成功、上傳出錯或被取消上傳后，等同數(shù)量的其他文件才可以被添加進(jìn)來。當(dāng)file_upload_limit的數(shù)值或者剩余的能上傳的文件數(shù)量小于file_queue_limit時，則取那個更小的值 | |
| flash_url | String | swfupload.swf文件的絕對或相對地址，相對地址是指相對于當(dāng)前的頁面地址。實例化swfupload后，就不能再改變該屬性的值了。 | |
| prevent_swf_caching | Boolean | 為true時會加一個隨機(jī)數(shù)在swfupload.swf地址的后面，以阻止flash影片被緩存，這是為了防止某些版本的IE瀏覽器在讀取緩存的falsh影片時出現(xiàn)的bug | |
| button_placeholder_id | String | 指定一個dom元素的id,該dom元素在swfupload實例化后會被Flash按鈕代替，這個dom元素相當(dāng)于一個占位符 | |
| button_placeholder | DOMElement | 指定一個dom元素,該dom元素在swfupload實例化后會被Flash按鈕代替，這個dom元素相當(dāng)于一個占位符。當(dāng)button_placeholder_id與button_placeholder都存在時，以button_placeholder_id為優(yōu)先 | |
| button_image_url | String | 指定Flash按鈕的背景圖片，相對地址或絕對地址都可以。該地址會受到preserve_relative_urls屬性的影響，遵從與upload_url一樣的規(guī)則。 該背景圖片必須是一個sprite圖片,從上到下包含了Flash按鈕的正常、鼠標(biāo)懸停、按下、禁用這四種狀態(tài)。因此該圖片的高度應(yīng)該是Flash按鈕高度的四倍 |
|
| button_width | Number | 指定Flash按鈕的寬度 | |
| button_height | Number | 指定Flash按鈕的高度，應(yīng)該為button_image_url所指定的按鈕背景圖片高度的1/4 | |
| button_text | String | 指定Flash按鈕上的文字，也可以是html代碼 | |
| button_text_style | String | Flash按鈕上的文字的樣式，使用方法見示例 | |
| button_text_top_padding | Number | 指定Flash按鈕頂部的內(nèi)邊距，可使用負(fù)值 | |
| button_text_left_padding | Number | 指定Flash按鈕左邊的內(nèi)邊距，可使用負(fù)值 | |
| button_disabled | Boolean | false | 為true時Flash按鈕將變?yōu)榻脿顟B(tài)，點擊也不會觸發(fā)任何行為 |
| button_cursor | 指定鼠標(biāo)懸停在Flash按鈕上時的光標(biāo)樣式，可用值為SWFUpload.CURSOR里定義的常量 | ||
| button_window_mode | 指定Flash按鈕的WMODE屬性，可用值為SWFUpload.WINDOW_MODE里定義的常量 | ||
| file_dialog_start_handler | Function | fileDialogStart事件偵聽函數(shù) | |
| file_queued_handler | Function | fileQueued事件偵聽函數(shù) | |
| file_queue_error_handler | Function | fileQueueError事件偵聽函數(shù) | |
| file_dialog_complete_handler | Function | fileDialogComplete事件偵聽函數(shù) | |
| upload_start_handler | Function | uploadStart事件偵聽函數(shù) | |
| upload_progress_handler | Function | uploadProgress事件偵聽函數(shù) | |
| upload_error_handler | Function | uploadError事件偵聽函數(shù) | |
| upload_success_handler | Function | uploadSuccess事件偵聽函數(shù) | |
| upload_complete_handler | Function | uploadComplete事件偵聽函數(shù) |
二、各種事件說明
要實現(xiàn)與用戶的交互，靠的就是在這些事件上做文章了
| fileDialogStart ( ) | ||
|---|---|---|
| 在文件選取窗口將要彈出時觸發(fā) | ||
| fileQueued ( file object ) | ||
| 當(dāng)一個文件被添加到上傳隊列時會觸發(fā)此事件，提供的唯一參數(shù)為包含該文件信息的file object對象 | ||
| fileQueueError ( file object, error code, message ) | ||
| 當(dāng)文件添加到上傳隊列失敗時觸發(fā)此事件，失敗的原因可能是文件大小超過了你允許的數(shù)值、文件是空的或者文件隊列已經(jīng)滿員了等。 該事件提供了三個參數(shù)。第一個參數(shù)是當(dāng)前出現(xiàn)問題的文件對象，第二個參數(shù)是具體的錯誤代碼，可以參照SWFUpload.QUEUE_ERROR中定義的常量 |
||
| fileDialogComplete ( number of files selected, number of files queued, total number of files in the queued ) | ||
| 當(dāng)文件選取完畢且選取的文件經(jīng)過處理后（指添加到上傳隊列），會立即觸發(fā)該事件?？梢栽谠撌录姓{(diào)用this.startUpload()方法來實現(xiàn)文件的自動上傳 參數(shù)number of files selected指本次在文件選取框里選取的文件數(shù)量 參數(shù)number of files queued指本次被添加到上傳隊列的文件數(shù)量 參數(shù)total number of files in the queued指當(dāng)前上傳隊列里共有多少個文件（包括了本次添加進(jìn)去的文件） |
||
| uploadStart ( file object ) | ||
| 當(dāng)文件即將上傳時會觸發(fā)該事件,該事件給了你在文件上傳前的最后一次機(jī)會來驗證文件信息、增加要隨之上傳的附加信息或做其他工作。可以通過返回false來取消本次文件的上傳 參數(shù)file object為當(dāng)前要上傳的文件的信息對象 |
||
| uploadProgress ( file object, bytes complete, total bytes ) | ||
| 該事件會在文件的上傳過程中反復(fù)觸發(fā)，可以利用該事件來實現(xiàn)上傳進(jìn)度條 參數(shù)file object為文件信息對象 參數(shù)bytes complete為當(dāng)前已上傳的字節(jié)數(shù) 參數(shù)total bytes為文件總的字節(jié)數(shù) |
||
| uploadError ( file object, error code, message ) | ||
| 文件上傳被中斷或是文件沒有成功上傳時會觸發(fā)該事件。停止、取消文件上傳或是在uploadStart事件中返回false都會引發(fā)這個事件，但是如果某個文件被取消了但仍然還在隊列中則不會觸發(fā)該事件 參數(shù)file object為文件信息對象 參數(shù)error code為錯誤代碼，具體的可參照SWFUpload.UPLOAD_ERROR中定義的常量 |
||
| uploadSuccess ( file object, server data, received response ) | ||
| 當(dāng)一個文件上傳成功后會觸發(fā)該事件 參數(shù)file object為文件信息對象 參數(shù)server data為服務(wù)器端輸出的數(shù)據(jù) |
||
| uploadComplete( file object ) | ||
| 當(dāng)一次文件上傳的流程完成時（不管是成功的還是不成功的）會觸發(fā)該事件，該事件表明本次上傳已經(jīng)完成，上傳隊列里的下一個文件可以開始上傳了。該事件發(fā)生后隊列中下一個文件的上傳將會開始 |
三、swfupload實例的方法
方法中大多數(shù)是動態(tài)改變參數(shù)配置對象的方法
| destroy ( ) | ||
|---|---|---|
| 當(dāng)不需要再使用SWFUpload了的時候,可以使用該方法來銷毀它的實例和dom元素 | ||
| startUpload( file_id ) | ||
| 開始上傳隊列中指定的文件 參數(shù)file_id代表要上傳的文件的id，如果未填寫這個參數(shù)，則會上傳隊列中第一個文件 |
||
| cancelUpload ( file_id, trigger_error_event ) | ||
| 取消文件的上傳 參數(shù)file_id為要取消的文件的id,如果該參數(shù)為undefined或者未填寫，則會取消隊列里的第一個文件 參數(shù)trigger_error_event接受一個布爾值，當(dāng)為false時取消文件不會觸發(fā)uploadError事件，默認(rèn)為true |
||
| stopUpload ( ) | ||
| 終止當(dāng)前正在上傳的文件，會觸發(fā)uploadError事件。如果當(dāng)前沒有文件在上傳，則該方法什么都不會做 | ||
| getStats ( ) | ||
| 獲取隊列的stats object | ||
| setStats ( stats_object ) | ||
| 修改隊列的stats_object，傳入修改過的stats_object作為參數(shù) | ||
| getFile ( file_id|index ) | ||
| 根據(jù)文件id或文件索引來獲取一個File Object,當(dāng)使用文件id時只能獲得隊列里的文件，當(dāng)使用文件索引時所有文件（包括隊列內(nèi)和隊列外）都可獲得 | ||
| addPostParam ( name, value) | ||
| 往配置對象中post_params指定的附加信息對象中增加鍵/值對 | ||
| removePostParam ( name) | ||
| 移除置配置對象中的post_params包含的某一個鍵/值對，參數(shù)name為要移除的值的鍵名 | ||
| addFileParam ( file_id, name, value) | ||
| 為某個特定文件增加隨之一起上傳的附加信息。注意，只有在該指定的文件上傳時，附加的信息才會一起上傳。而配置對象中post_param設(shè)置的附加信息在任一文件上傳時都會與之一起發(fā)送。 參數(shù)file_id為要指定的文件id,參數(shù)name和value分別為附加信息的名稱和值 |
||
| removeFileParam ( file_id, name) | ||
| 移除通過addFileParam方法增加的附加信息，兩個參數(shù)相信就不用我多講了吧 | ||
| setUploadURL ( url) | ||
| 動態(tài)設(shè)置配置對象中upload_url的值 | ||
| setPostParams ( param_object) | ||
| 動態(tài)設(shè)置配置對象中post_params屬性的值，新的值會覆蓋舊的值。 參數(shù)param_object必須為一個對象直接量，且里面的屬性和值都只能為字符串 |
||
| setFileTypes ( types, description) | ||
| 動態(tài)設(shè)置配置對象中file_types 和 file_types_description屬性的值。兩個參數(shù)都不能省略 | ||
| setFileSizeLimit ( file_size_limit) | ||
| 動態(tài)設(shè)置配置對象中file_size_limit屬性的值 | ||
| setFileUploadLimit ( file_upload_limit) | ||
| 動態(tài)設(shè)置配置對象中file_upload_limit屬性的值 | ||
| setFileQueueLimit ( file_queue_limit) | ||
| 動態(tài)設(shè)置配置對象中file_queue_limit屬性的值 | ||
| setFilePostName ( file_post_name) | ||
| 動態(tài)設(shè)置配置對象中file_post_name屬性的值 | ||
| setUseQueryString ( use_query_string) | ||
| 動態(tài)設(shè)置配置對象中use_query_string屬性的值 | ||
| setButtonImageURL ( url) | ||
| 動態(tài)設(shè)置配置對象中button_image_url屬性的值 | ||
| setButtonDimensions ( width, height) | ||
| 動態(tài)設(shè)置Flash按鈕的寬度和高度，兩個參數(shù)分別為寬度和高度的值，類型為數(shù)字，且不能帶單位 | ||
| setButtonText ( text) | ||
| 動態(tài)設(shè)置配置對象中button_text屬性的值 | ||
| setButtonTextStyle ( css_style_text) | ||
| 動態(tài)設(shè)置配置對象中button_text_style屬性的值 | ||
| setButtonTextPadding ( left, top ) | ||
| 動態(tài)設(shè)置Flash按鈕的左邊內(nèi)邊距和頂部內(nèi)邊距 | ||
| setButtonDisabled ( isDisabled ) | ||
| 動態(tài)對Flash按鈕進(jìn)行禁用和不禁用的操作，參數(shù)為一個布爾值 | ||
| setButtonCursor ( buttonCursor ) | ||
| 動態(tài)設(shè)置配置對象中button_cursor的值 |
四、文件信息對象 File Object
在事件監(jiān)聽函數(shù)中，經(jīng)常要用到文件信息對象來獲取文件的信息以供下一步的操作
| 屬性 | 類型 | 描述 |
|---|---|---|
| id | String | SWFUpload定義的文件id,用來控制文件的上傳 |
| index | Number | 文件的索引，用在getFile(i)方法中 |
| name | String | 文件的原始名稱，不包括路徑 |
| type | String | 文件類型 |
| creationdate | Date | 文件的創(chuàng)建日期 |
| modificationdate | Date | 文件的最后修改日期 |
| filestatus | Number | 當(dāng)前文件的狀態(tài)，詳細(xì)的請參照SWFUpload.FILE_STATUS中定義的常量 |
五、隊列狀態(tài)對象 Stats Object
用來獲取當(dāng)前隊列的狀況
| 屬性 | 類型 | 描述 |
|---|---|---|
| in_progress | Number | 得到的值為1或0，表明當(dāng)前隊列是否有文件正在上傳中 |
| files_queued | Number | 目前上傳隊列中的文件數(shù)量 |
| successful_uploads | Number | 已成功上傳(指觸發(fā)了uploadSuccess事件)的文件數(shù)量 |
| upload_errors | Number | 上傳失敗的文件數(shù)量(包括被取消上傳的文件) |
| upload_cancelled | Number | 被取消上傳的文件數(shù)量 |
| queue_errors | Number | 觸發(fā)了fileQueueError事件的文件數(shù)量 |
六、一些常量
定義的一些常量，便于理解
內(nèi)容太多了，感覺有點亂了，如果還不清楚怎么使用，建議看下官網(wǎng)的使用流程，明白怎么使用后再來看這些屬性、事件、方法、常量什么的吧。
以上就是本文的全部內(nèi)容，希望對大家有所幫助，同時也希望多多支持腳本之家！
相關(guān)文章
讓mayfish支持mysqli數(shù)據(jù)庫驅(qū)動的實現(xiàn)方法
mysql 是非持繼連接函數(shù)而 mysqli 是永遠(yuǎn)連接函數(shù)。也就是說 mysql 每次鏈接都會打開一個連接的進(jìn)程而 mysqli 多次運行 mysqli 將使用同一連接進(jìn)程,從而減少了服務(wù)器的開銷。2010-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)長圖滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串，這篇文章主要介紹了js中進(jìn)行字符串替換的方法,需要的朋友可以參考下2024-01-01
JavaScript中如何通過arguments對象實現(xiàn)對象的重載
js 中不存在函數(shù)的重載，但卻可以通過arguments對象實現(xiàn)對象的重載，下面有個不錯的示例，大家可以參考下2014-05-05
JavaScript實現(xiàn)從數(shù)組中選出和等于固定值的n個數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)從數(shù)組中選出和等于固定值的n個數(shù)的方法,需要的朋友可以參考下2014-09-09
File, FileReader 和 Ajax 文件上傳實例分析(php)
File, FileReader 和 Ajax 文件上傳實例分析(php),需要的朋友可以參考下。2011-04-04
Bootstrap導(dǎo)航條可點擊和鼠標(biāo)懸停顯示下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條可點擊和鼠標(biāo)懸停顯示下拉菜單,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
javascript讀取RSS數(shù)據(jù)...2007-01-01
最近有朋友問我node環(huán)境和瀏覽器的區(qū)別這一問題，今天小編就抽空給大家介紹下Node環(huán)境和瀏覽器的區(qū)別，感興趣的朋友一起看看吧2018-08-08
閉包是一個擁有許多變量和綁定了這些變量的環(huán)境表達(dá)式（通常是一個函數(shù)），因而這些變量也是環(huán)境表達(dá)式的一部分。2010-12-12