swfupload 多檔案上傳的屬性與事件方法總結

2021-06-16 05:34:45 字數 4000 閱讀 7696

swfupload的原理:

利用flash選擇檔案後上傳,通過flash和js互動,對整個過程進行控制——包括頁面的dom操作之類的,都可以通過js來進行控制。

說白了,就是用flash上傳,js操作dom

使用時首先必須要初始化

var swfobject,paramsobject;

window.onload = function()

這個初始化做了很多事情,包括對swfupload生成的例項的引數等等。

所有的引數設定都在那個paramsobject引數中。 paramsobject其實是乙個json格式的物件,該物件有一些屬性。

upload_url:   檔案上傳的處理程式,就是說,你要在這個檔案對上傳這個動作進行定義,比如檔案儲存、重新命名之類的,如果這個沒有具體動作的話,檔案不會在伺服器上有任何蹤跡(根本就不是file格式傳遞的。)

flash_url : 上傳的flash,用swfupload預設的就可以。具體位置具體解決。

file_post_name : 這個和upload_url有關係。這個設定後,在upload_url路徑中,就可以用request(「filedata」)來獲取上傳的檔案相關資訊了。

file_types : 「*.jpg;*.gif」, //允許上傳檔案型別

file_types_description: 選取檔案時的描述

file_size_limit : 「1024″, //可以上傳檔案的最大尺寸,單位可以是b、kb、mb、gb,如果沒有單位,則預設是kb

file_upload_limit :最大可以上傳檔案數量 0為不限制

file_queue_limit :上傳佇列等待檔案數的最大值

debug : false //是否除錯模式

prevent_swf_caching : false,//在相關的swf檔案增加隨機引數以避免flash被快取(建議開啟,flash被快取已經導致太多問題了)

button_placeholder_id : 「element_id」, //flash選擇檔案按鈕的id,相應的dom的id元素會被替換成flash上傳按鈕

button_image_url : //flash上傳按鈕的

button_width:

button_height:

button_text :

button_text_style:

button_text_left_padding:

button_text_top_padding:

button_action : swfupload.button_action.select_files 可以多選檔案/ swfuplaod.button_action.select_file 不可以多選檔案

button_disable :false//按鈕是否不可用

button_cursor : swfupload.button_cursor.hand //滑鼠劃過flash按鈕顯示的游標狀態

button_window_mode : swfupload.window_mode.transparent

swfupload_loaded_handler : swfupload_loaded_function, //flash按鈕被載入好的時候執行的操作,可以為空。

file_dialog_start_handler : file_dialog_start_function, //開啟檔案選擇選擇視窗時觸發的事件,預設方法filedialogstart,可根據需要過載方法

file_queued_handler : file_queued_function, //檔案成功選擇後觸發的事件,預設方法filequeued(fileobject),可根據需要過載方法

file_queue_error_handler : file_queue_error_function, //檔案選擇失敗後觸發事件(型別不對、大小不對等等),預設方法 filequeueerror(fileobject,errorcode,message),可根據需要過載方法

file_dialog_complete_handler : file_dialog_complete_function,//檔案選擇視窗關閉時觸發事件,預設方法 filedialogcomplete(number of selected files,number of queued files),可根據需要過載方法

upload_start_handler : upload_start_function, //上傳開始時觸發事件,預設方法uploadstart(fileobject),可根據需要過載方法

upload_progress_handler : upload_progress_function, //檔案上傳過程中觸發事件,預設方法uploadprogress(fileobject,bytes complete,bytes all),可根據需要過載方法

upload_error_handler : upload_error_function, //檔案傳輸過程中出錯觸發事件,預設方法uploaderror(fileobject,error code,message),可根據需要過載方法

upload_success_handler : upload_success_function,//檔案傳輸完成(僅僅是傳送,不管伺服器是否操作),預設方法 uploadsuccess(fileobject,serverdata),可根據需要過載方法。其中serverdata表示伺服器 upload_url返回的資訊(window伺服器需要返回乙個非空值,否則success和complete都不執行)

upload_complete_handler : upload_complete_function, //乙個檔案上傳週期完成時觸發(不管是否上傳成功還是失敗,都會觸發) debug_handler : debug_function, //除錯模式開啟的時候,在頁面的textarea中新增debug資訊供呼叫。預設swfupload已經定義了debug(message)方法調 用,如有需要複寫覆蓋掉。

custom_settings : }//定義的變數主要是供各個handler函式使用。

ps:引數中的各個函式,都算是swfupload這個類的的成員函式。呼叫 swfupload的其他函式就可以直接用this.***()來呼叫。如果不是上述引數中的函式,需要呼叫swfupload的函式,比如上傳開始的 startupload()。如果你是在filequeued函式中要上傳,那麼只需要執行this.startupload()就可以了。如果你想在點 擊submit的時候進行上傳,那麼這個時候週期就不在swfupload執行中了(不屬於上述任何乙個handler),這時你要想上傳就應該是指明某 個swfupload的例項,比如本篇應該是swfobject.startupload();(具體理解成類就好了,乙個是在類的內部呼叫,一種是類的 外部呼叫)

upload_success_handler:uploadsuccess swfupload的提交過程與表單無關,所以我們需要手動設定swfupload的物件進行startupload();——這個方法是已經初始化的 swfupload物件具有的方法。操作才行。通常情況下,我們可以在表單的submit按鈕上面新增乙個onclick操作或者對表單增加乙個 onsubmit操作,在執行相應的操作之前,先將swfupload物件中的檔案先上傳上去,在上傳成功後,也就是 upload_success_handler被觸發的時候,對頁面的dom進行操作,比對部分hidden元素進行賦值(不賦值,如何知道相應的上傳結 果等亂七八糟的事情),然後表單提交的時候就直接帶著這些hidden值就傳過去了。 在整個過程中,上傳和表單提交是兩個完全不同的過程執行的操作(如果你把startupload方法繫結到表單提交過程中的話,感覺是乙個過程,但是本質 上還是兩個過程——檔案上傳(包括對表單的部分hidden域進行賦值)和表單提交兩個過程。) 所以我有個想法,乾脆在file_queued_handler過程中就直接上傳,也就是觸發startupload()方法,並且在 upload_success_handler事件中對隱藏域(hidden)賦值,一方面省去了最後一次性提交的麻煩,另一方面也較少了系統響應時間 (表單還是有一些時間填寫的哦)。

由於swf為utf8編碼,亂碼的時候要轉換下

以下為例子

SWFUpload上傳檔案

一 swfupload介紹 1.首先為什麼要使用該組建進行上傳檔案?而不使用以往的上傳檔案的方式。答 因為以往的上傳檔案會造成表單頁面的重新整理。這樣上傳檔案會很不方便。但是swfupload能夠很好的解決該困惑。二 swfupload的使用,建議去看看別人寫的demo,然後再去使用該外掛程式。1....

檔案上傳利器SWFUpload入門簡易教程

凡做過 開發的都應該知道表單file的確雞肋。ajax解決了不重新整理頁面提交表單,但是卻沒有解決檔案上傳不重新整理頁面,當然也有其它技術讓不重新整理頁面而提交檔案,該技術主要是利用隱藏的iframe,較ajax要麻煩許多,而且其提交方式依然在底層是使用的表單file,這裡我們不詳談。而且如果是提交...

多檔案上傳

這是我開發過程中用涉及到的乙個功能,現在備份下來。首先是在 web.confing 中做限制上傳大小配置和超時的配置,的節點下有 executiontimeout maxrequestlength兩個屬性。executiontimeout設定超時的時間值,預設的為90秒,如果超出這個時間,瀏覽器就會...