欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

文件上傳插件SWFUpload的使用指南

 更新時(shí)間:2016年11月29日 14:39:13   作者:無雙  
本文主要介紹了文件上傳插件SWFUpload使用指南,SWFUpload是一個(gè)flash和js相結(jié)合而成的文件上傳插件,其功能非常強(qiáng)大。需要的朋友可以參考下

SWFUpload是一個(gè)flash和js相結(jié)合而成的文件上傳插件,其功能非常強(qiáng)大。以前在項(xiàng)目中用過幾次,但它的配置參數(shù)太多了,用過后就忘記怎么用了,到以后要用時(shí)又得到官網(wǎng)上看它的文檔,真是太煩了。所以索性就把它的用法記錄下來,也方便英語拙計(jì)的同學(xué)查看,利人利己,一勞永逸。(ps:SWFUpload早就不再更新了,官網(wǎng)也打不開了,推薦大家使用Plupload來代替SWFUpload,Plupload以html5上傳方式為主,在不支持html5的瀏覽器中會(huì)自動(dòng)回退到flash的上傳方式,功能灰常強(qiáng)大!使用方法可以看我寫的《前端上傳組件Plupload使用指南》)

SWFUpload的特點(diǎn):

1、用flash進(jìn)行上傳,頁面無刷新,且可自定義Flash按鈕的樣式;

2、可以在瀏覽器端就對(duì)要上傳的文件進(jìn)行限制;

3、允許一次上傳多個(gè)文件,但會(huì)有一個(gè)上傳隊(duì)列,隊(duì)列里文件的上傳是逐個(gè)進(jìn)行的,服務(wù)器端接收文件時(shí)跟普通的表單上傳文件是一樣的;

4、提供了豐富的事件接口供開發(fā)者使用;

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

1、引入相應(yīng)的js文件

2、實(shí)例化SWFUpload對(duì)象,傳入一個(gè)配置參數(shù)對(duì)象進(jìn)行各方面的配置。

3、點(diǎn)擊SWFUpload提供的Flash按鈕,彈出文件選取窗口選擇要上傳的文件;

4、文件選取完成后符合規(guī)定的文件會(huì)被添加到上傳的隊(duì)列里;

5、調(diào)用startUpload方法讓隊(duì)列里文件開始上傳;

6、文件上傳過程中會(huì)觸發(fā)相應(yīng)的事件,開發(fā)者利用這些事件來更新ui、處理錯(cuò)誤、發(fā)出提示等等;

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

<script src='SWFUpload.js'></script>

 然后實(shí)例化一個(gè)SWFUpload對(duì)象:

var swfu; 
window.onload = function () {
 var settings_object = {//定義參數(shù)配置對(duì)象
 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);//實(shí)例化一個(gè)SWFUpload,傳入?yún)?shù)配置對(duì)象
};
/*定義各種事件監(jiān)聽函數(shù)*/
function swfupload_loaded_function(){}
function file_dialog_start_function(){}
...等等

我們看到要實(shí)現(xiàn)一個(gè)swfupload上傳功能很簡單,就是實(shí)例化一個(gè)swfupload對(duì)象。但繁瑣的地方就在于實(shí)例化實(shí)要用到的參數(shù)配置對(duì)象,以及各種事件的發(fā)生時(shí)機(jī)以和提供的參數(shù)。所以重點(diǎn)來了。下面幾個(gè)表格對(duì)開發(fā)中要用到的東西列舉了出來,雖然已經(jīng)蠻多了,但并不是swfupload的全部,我列出來的只是常用的。要查看完整的文檔,請(qǐng)到swfupload官網(wǎng)上查詢。

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

屬性 類型 默認(rèn)值 描述
upload_url String   處理上傳文件的服務(wù)器端頁面的url地址,可以是絕對(duì)地址,也可以是相對(duì)地址,當(dāng)為相對(duì)地址時(shí)相對(duì)的是當(dāng)前代碼所在的文檔地址
preserve_relative_urls Boolean false 如果為false則SWFUpload會(huì)把swfupload.swf用到的相對(duì)地址轉(zhuǎn)換為絕對(duì)地址,以達(dá)到更好的兼容性
file_post_name String Filedata 相當(dāng)于用普通的文件域上傳文件時(shí)的name屬性,服務(wù)器端接收頁面通過該名稱來獲取上傳的文件
post_params Object(直接量)   一個(gè)對(duì)象直接量,里面的鍵/值對(duì)會(huì)隨著每一個(gè)文件一起上傳,文件上傳要附加一些信息時(shí)很有用
use_query_string Boolean false 為false時(shí),post_params屬性定義的參數(shù)會(huì)以post方式上傳;為true時(shí),則會(huì)以get方式上傳(即參數(shù)會(huì)以查詢字符串的形式附加到url后面)
file_types String   該屬性指定了允許上傳的文件類型,當(dāng)有多個(gè)類型時(shí)使用分號(hào)隔開,比如:*.jpg;*.png ,允許所有類型時(shí)請(qǐng)使用 *.*
file_types_description String   指定在文件選取窗口中顯示的文件類型描述,起一個(gè)提示和說明的作用吧
file_size_limit String   指定要上傳的文件的最大體積,可以帶單位,合法的單位有:B、KB、MB、GB,如果省略了單位,則默認(rèn)為KB。該屬性為0時(shí),表示不限制文件的大小。
file_upload_limit Number   指定最多能上傳多少個(gè)文件,當(dāng)上傳成功的文件數(shù)量達(dá)到了這個(gè)最大值后,就不能再上傳文件了,也不能往上傳隊(duì)列里添加文件了。把該屬性設(shè)為0時(shí)表示不限制文件的上傳數(shù)量。
file_queue_limit Number   指定文件上傳隊(duì)列里最多能同時(shí)存放多少個(gè)文件。當(dāng)超過了這個(gè)數(shù)目后只有當(dāng)隊(duì)列里有文件上傳成功、上傳出錯(cuò)或被取消上傳后,等同數(shù)量的其他文件才可以被添加進(jìn)來。當(dāng)file_upload_limit的數(shù)值或者剩余的能上傳的文件數(shù)量小于file_queue_limit時(shí),則取那個(gè)更小的值
flash_url String   swfupload.swf文件的絕對(duì)或相對(duì)地址,相對(duì)地址是指相對(duì)于當(dāng)前的頁面地址。實(shí)例化swfupload后,就不能再改變該屬性的值了。
prevent_swf_caching Boolean   為true時(shí)會(huì)加一個(gè)隨機(jī)數(shù)在swfupload.swf地址的后面,以阻止flash影片被緩存,這是為了防止某些版本的IE瀏覽器在讀取緩存的falsh影片時(shí)出現(xiàn)的bug
button_placeholder_id String   指定一個(gè)dom元素的id,該dom元素在swfupload實(shí)例化后會(huì)被Flash按鈕代替,這個(gè)dom元素相當(dāng)于一個(gè)占位符
button_placeholder DOMElement   指定一個(gè)dom元素,該dom元素在swfupload實(shí)例化后會(huì)被Flash按鈕代替,這個(gè)dom元素相當(dāng)于一個(gè)占位符。當(dāng)button_placeholder_id與button_placeholder都存在時(shí),以button_placeholder_id為優(yōu)先
button_image_url String   指定Flash按鈕的背景圖片,相對(duì)地址或絕對(duì)地址都可以。該地址會(huì)受到preserve_relative_urls屬性的影響,遵從與upload_url一樣的規(guī)則。
該背景圖片必須是一個(gè)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時(shí)Flash按鈕將變?yōu)榻脿顟B(tài),點(diǎn)擊也不會(huì)觸發(fā)任何行為
button_cursor     指定鼠標(biāo)懸停在Flash按鈕上時(shí)的光標(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ù)

二、各種事件說明

要實(shí)現(xiàn)與用戶的交互,靠的就是在這些事件上做文章了

fileDialogStart ( )
在文件選取窗口將要彈出時(shí)觸發(fā)
fileQueued ( file object )
當(dāng)一個(gè)文件被添加到上傳隊(duì)列時(shí)會(huì)觸發(fā)此事件,提供的唯一參數(shù)為包含該文件信息的file object對(duì)象
fileQueueError ( file object, error code, message )
當(dāng)文件添加到上傳隊(duì)列失敗時(shí)觸發(fā)此事件,失敗的原因可能是文件大小超過了你允許的數(shù)值、文件是空的或者文件隊(duì)列已經(jīng)滿員了等。
該事件提供了三個(gè)參數(shù)。第一個(gè)參數(shù)是當(dāng)前出現(xiàn)問題的文件對(duì)象,第二個(gè)參數(shù)是具體的錯(cuò)誤代碼,可以參照SWFUpload.QUEUE_ERROR中定義的常量
fileDialogComplete ( number of files selected, number of files queued, total number of files in the queued )
當(dāng)文件選取完畢且選取的文件經(jīng)過處理后(指添加到上傳隊(duì)列),會(huì)立即觸發(fā)該事件??梢栽谠撌录姓{(diào)用this.startUpload()方法來實(shí)現(xiàn)文件的自動(dòng)上傳
參數(shù)number of files selected指本次在文件選取框里選取的文件數(shù)量
參數(shù)number of files queued指本次被添加到上傳隊(duì)列的文件數(shù)量
參數(shù)total number of files in the queued指當(dāng)前上傳隊(duì)列里共有多少個(gè)文件(包括了本次添加進(jìn)去的文件)
uploadStart ( file object )
當(dāng)文件即將上傳時(shí)會(huì)觸發(fā)該事件,該事件給了你在文件上傳前的最后一次機(jī)會(huì)來驗(yàn)證文件信息、增加要隨之上傳的附加信息或做其他工作??梢酝ㄟ^返回false來取消本次文件的上傳
參數(shù)file object為當(dāng)前要上傳的文件的信息對(duì)象
uploadProgress ( file object, bytes complete, total bytes )
該事件會(huì)在文件的上傳過程中反復(fù)觸發(fā),可以利用該事件來實(shí)現(xiàn)上傳進(jìn)度條
參數(shù)file object為文件信息對(duì)象
參數(shù)bytes complete為當(dāng)前已上傳的字節(jié)數(shù)
參數(shù)total bytes為文件總的字節(jié)數(shù)
uploadError ( file object, error code, message )
文件上傳被中斷或是文件沒有成功上傳時(shí)會(huì)觸發(fā)該事件。停止、取消文件上傳或是在uploadStart事件中返回false都會(huì)引發(fā)這個(gè)事件,但是如果某個(gè)文件被取消了但仍然還在隊(duì)列中則不會(huì)觸發(fā)該事件
參數(shù)file object為文件信息對(duì)象
參數(shù)error code為錯(cuò)誤代碼,具體的可參照SWFUpload.UPLOAD_ERROR中定義的常量
uploadSuccess ( file object, server data, received response )
當(dāng)一個(gè)文件上傳成功后會(huì)觸發(fā)該事件
參數(shù)file object為文件信息對(duì)象
參數(shù)server data為服務(wù)器端輸出的數(shù)據(jù)
uploadComplete( file object )
當(dāng)一次文件上傳的流程完成時(shí)(不管是成功的還是不成功的)會(huì)觸發(fā)該事件,該事件表明本次上傳已經(jīng)完成,上傳隊(duì)列里的下一個(gè)文件可以開始上傳了。該事件發(fā)生后隊(duì)列中下一個(gè)文件的上傳將會(huì)開始

三、swfupload實(shí)例的方法

方法中大多數(shù)是動(dòng)態(tài)改變參數(shù)配置對(duì)象的方法

destroy ( )
當(dāng)不需要再使用SWFUpload了的時(shí)候,可以使用該方法來銷毀它的實(shí)例和dom元素
startUpload( file_id )
開始上傳隊(duì)列中指定的文件
參數(shù)file_id代表要上傳的文件的id,如果未填寫這個(gè)參數(shù),則會(huì)上傳隊(duì)列中第一個(gè)文件
cancelUpload ( file_id, trigger_error_event )
取消文件的上傳
參數(shù)file_id為要取消的文件的id,如果該參數(shù)為undefined或者未填寫,則會(huì)取消隊(duì)列里的第一個(gè)文件
參數(shù)trigger_error_event接受一個(gè)布爾值,當(dāng)為false時(shí)取消文件不會(huì)觸發(fā)uploadError事件,默認(rèn)為true
stopUpload ( )
終止當(dāng)前正在上傳的文件,會(huì)觸發(fā)uploadError事件。如果當(dāng)前沒有文件在上傳,則該方法什么都不會(huì)做
getStats ( )
獲取隊(duì)列的stats object
setStats ( stats_object )
修改隊(duì)列的stats_object,傳入修改過的stats_object作為參數(shù)
getFile ( file_id|index )
根據(jù)文件id或文件索引來獲取一個(gè)File Object,當(dāng)使用文件id時(shí)只能獲得隊(duì)列里的文件,當(dāng)使用文件索引時(shí)所有文件(包括隊(duì)列內(nèi)和隊(duì)列外)都可獲得
addPostParam ( name, value)
往配置對(duì)象中post_params指定的附加信息對(duì)象中增加鍵/值對(duì)
removePostParam ( name)
移除置配置對(duì)象中的post_params包含的某一個(gè)鍵/值對(duì),參數(shù)name為要移除的值的鍵名
addFileParam ( file_id, name, value)
為某個(gè)特定文件增加隨之一起上傳的附加信息。注意,只有在該指定的文件上傳時(shí),附加的信息才會(huì)一起上傳。而配置對(duì)象中post_param設(shè)置的附加信息在任一文件上傳時(shí)都會(huì)與之一起發(fā)送。
參數(shù)file_id為要指定的文件id,參數(shù)name和value分別為附加信息的名稱和值
removeFileParam ( file_id, name)
移除通過addFileParam方法增加的附加信息,兩個(gè)參數(shù)相信就不用我多講了吧
setUploadURL ( url)
動(dòng)態(tài)設(shè)置配置對(duì)象中upload_url的值
setPostParams ( param_object)
動(dòng)態(tài)設(shè)置配置對(duì)象中post_params屬性的值,新的值會(huì)覆蓋舊的值。
參數(shù)param_object必須為一個(gè)對(duì)象直接量,且里面的屬性和值都只能為字符串
setFileTypes ( types, description)
動(dòng)態(tài)設(shè)置配置對(duì)象中file_types 和 file_types_description屬性的值。兩個(gè)參數(shù)都不能省略
setFileSizeLimit ( file_size_limit)
動(dòng)態(tài)設(shè)置配置對(duì)象中file_size_limit屬性的值
setFileUploadLimit ( file_upload_limit)
動(dòng)態(tài)設(shè)置配置對(duì)象中file_upload_limit屬性的值
setFileQueueLimit ( file_queue_limit)
動(dòng)態(tài)設(shè)置配置對(duì)象中file_queue_limit屬性的值
setFilePostName ( file_post_name)
動(dòng)態(tài)設(shè)置配置對(duì)象中file_post_name屬性的值
setUseQueryString ( use_query_string)
動(dòng)態(tài)設(shè)置配置對(duì)象中use_query_string屬性的值
setButtonImageURL ( url)
動(dòng)態(tài)設(shè)置配置對(duì)象中button_image_url屬性的值
setButtonDimensions ( width, height)
動(dòng)態(tài)設(shè)置Flash按鈕的寬度和高度,兩個(gè)參數(shù)分別為寬度和高度的值,類型為數(shù)字,且不能帶單位
setButtonText ( text)
動(dòng)態(tài)設(shè)置配置對(duì)象中button_text屬性的值
setButtonTextStyle ( css_style_text)
動(dòng)態(tài)設(shè)置配置對(duì)象中button_text_style屬性的值
setButtonTextPadding ( left, top )
動(dòng)態(tài)設(shè)置Flash按鈕的左邊內(nèi)邊距和頂部內(nèi)邊距
setButtonDisabled ( isDisabled )
動(dòng)態(tài)對(duì)Flash按鈕進(jìn)行禁用和不禁用的操作,參數(shù)為一個(gè)布爾值
setButtonCursor ( buttonCursor )
動(dòng)態(tài)設(shè)置配置對(duì)象中button_cursor的值

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

在事件監(jiān)聽函數(shù)中,經(jīng)常要用到文件信息對(duì)象來獲取文件的信息以供下一步的操作

屬性 類型 描述
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ì)的請(qǐng)參照SWFUpload.FILE_STATUS中定義的常量

五、隊(duì)列狀態(tài)對(duì)象 Stats Object

用來獲取當(dāng)前隊(duì)列的狀況

屬性 類型 描述
in_progress Number 得到的值為1或0,表明當(dāng)前隊(duì)列是否有文件正在上傳中
files_queued Number 目前上傳隊(duì)列中的文件數(shù)量
successful_uploads Number 已成功上傳(指觸發(fā)了uploadSuccess事件)的文件數(shù)量
upload_errors Number 上傳失敗的文件數(shù)量(包括被取消上傳的文件)
upload_cancelled Number 被取消上傳的文件數(shù)量
queue_errors Number 觸發(fā)了fileQueueError事件的文件數(shù)量

六、一些常量

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

常量名 描述
SWFUpload.instances 該常量是一個(gè)對(duì)象,代表一個(gè)頁面上所有的SWFUpload實(shí)例的引用的集合,用SWFUpload實(shí)例的movieName屬性進(jìn)行索引
SWFUpload.movieCount 頁面上存在的SWFUpload實(shí)例的數(shù)量
   
SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED 用戶選取的文件超過了允許的數(shù)量
SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT 文件的體積超過了允許的大小
SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE 文件是空的
SWFUpload.QUEUE_ERROR.INVALID_FILETYPE 不允許的文件類型
   
SWFUpload.UPLOAD_ERROR.HTTP_ERROR 服務(wù)器返回的狀態(tài)碼不是200
SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL 沒有設(shè)置 upload_url
SWFUpload.UPLOAD_ERROR.IO_ERROR 讀取或傳輸文件時(shí)發(fā)生錯(cuò)誤
SWFUpload.UPLOAD_ERROR.SECURITY_ERROR 上傳受到了安全方面的限制
SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED 上傳的文件數(shù)量超過了允許的最大值
SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED 上傳出現(xiàn)錯(cuò)誤
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 文件正在隊(duì)列中等待上傳
SWFUpload.FILE_STATUS.IN_PROGRESS 文件正在上傳
SWFUpload.FILE_STATUS.ERROR 文件在添加到隊(duì)列或是上傳的時(shí)候出現(xiàn)了錯(cuò)誤
SWFUpload.FILE_STATUS.COMPLETE 文件已上傳成功
SWFUpload.FILE_STATUS. 文件被取消上傳
   
SWFUpload.CURSOR.ARROW 鼠標(biāo)以箭頭顯示
SWFUpload.CURSOR.HAND 鼠標(biāo)以手形顯示
   
SWFUpload.WINDOW_MODE.WINDOW Flash按鈕會(huì)顯示在頁面的所有dom元素上面
SWFUpload.WINDOW_MODE.OPAQUE 允許其他dom元素覆蓋住Flash按鈕
SWFUpload.WINDOW_MODE.TRANSPARENT 允許Flash按鈕透明顯示

內(nèi)容太多了,感覺有點(diǎn)亂了,如果還不清楚怎么使用,建議看下官網(wǎng)的使用流程,明白怎么使用后再來看這些屬性、事件、方法、常量什么的吧。

以上就是本文的全部內(nèi)容,希望對(duì)大家有所幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

最新評(píng)論