swfupload(以下簡稱su)遇到的主要問題就是,版本不同造成的極大差異,現在的版本已經到2.1beta。我用的是2.02版

y0umer發表於2010-08-19

異具體體現在:
lash_url : “../swfupload/swfupload_f8.
swf


upload
_url: “../multiuploaddemo/upload
.php”,

function uploadSuccess(fileObj, server_data)
      如果flash_url用的是f8.swf
,那麼upload
_url要使用相對SWF
的路徑;如果用的是f9.swf
,那麼upload
_url
要使用相對當前程式頁面(jsp,asp
)的路徑,就是這點,耽誤了我很長時間. 如果要使用server_data傳遞返回值,也必須用f9.swf
,這點也花
了我不少時間. 不管怎樣,su都提供的全部原始碼,有問題可以自己研究,前提是你能像我一樣看的懂,呵呵.

      su使用的是flash的上傳功能(Flash.net.FileReference;),還用了ActionScript 和
Flash Player 的容器之間實現直接通訊的應用程式程式設計介面ExternalInterface(詳見後文附錄),

su超級好用,而且功能強大,可以一次上傳多個檔案,能在客戶端檢驗檔案型別和大小,還能在上傳進度中進行控制,能在檔案傳完後得到後臺反饋信
息,有較好的debug對話方塊,比如看看它的高階示例: http://demo.swfupload.org/featuresdemo/index.php
目前唯一不足的可能是對中文檔名支援不好.我研究了半天它的flash as指令碼,都沒弄明白中文問題怎麼改.

它的線上文件: http://demo.swfupload.org/Documentation/

下面具體講講su怎麼用。
假設有一個前臺頁面upload
.asp
,一個後
臺接收檔案的頁面save.asp
,還有su的核心檔案swfupload.js,輔助處理指令碼handlers.js。
1, 這兩個js,網上的原始碼裡就有,核心js不用改. handlers可以直接用,也可以自己寫,看各人本事了.
核心js裡,主要是看SWFUpload.prototype.initSettings 初始化設定,很多引數該怎麼寫,可以參考它.
2, 要在前臺頁面裡呼叫這兩個js,然後初始化swfu物件。 摺疊展開JavaScript複製程式碼
<script type=”text/javascript”>   
var swfu;   
window.onload = function () {   
    swfu = new SWFUpload({   
    // Backend Settings   
    upload
_url:
upload
.asp
“,   
// Relative to the SWF
file 就是這個地方誤導了我   
    file_post_name: “Filedata”,  // 檔案物件的名稱,預設Filedata,可以自己改.後臺接收就靠它識別   

    post_params: {“SESSID” : “<%=session.SessionID%>”},  //
附加引數,版本2新功能   
 
    // File Upload
Settings   
    file_size_limit : “204”,    // 單位kb, 限制檔案大小   
    file_types : “*.jpg”,  //允許的檔案型別   
    file_types_description : “JPG Images”, //對話方塊裡的檔案型別   
    file_upload
_limit
: “0”,   
 
    // Event Handler Settings – these functions as defined in
Handlers.js   
    //  The handlers are not part of SWFUpload but are part of my
website and control how   
    //  my website reacts to the SWFUpload events.   
    //  事件處理,可以自己在handlers.js裡面擴充,極大的方便了開發者   
    //  就是要在handlers裡面定義如下的function,當然function裡面可以什麼也不幹,或者用原始碼自帶的也行   
    file_queue_error_handler : fileQueueError,   
    file_dialog_complete_handler : fileDialogComplete,   
    upload
_progress_handler
: uploadProgress,   
    upload
_error_handler
: uploadError,   
    upload
_success_handler
: uploadSuccess,   
    upload
_complete_handler
: uploadComplete,   
 
    // Flash Settings   
    flash_url : “js/swfupload_f9.swf
“,    // Relative to this
file 注意是f8還是f9   
 
    custom_settings : {   
        upload
_target
: “divFileProgressContainer” 
    },   
       
    // Debug Settings 是否開啟除錯資訊,預設false   
    debug: true 
    });   
}   
</script> 

下面是表單的寫法,無需input type=file的寫法 XML/HTML複製程式碼
<form> 
    <button id=”btnBrowse” type=”button” style=”padding: 5px;”
onclick=”swfu.selectFiles(); this.blur();”><img
src=”image/page_white_add.png” style=”padding-right: 3px;
vertical-align: bottom;”>Select Images <span style=”font-size:
7pt;”>(2 MB Max)</span></button> 
</form> 
3, 後臺save.asp
.
其實如果你做過普通的檔案上傳,這裡就很簡單,不管是jsp,asp
,php,基本原理都一樣. 前臺swf
得到檔案後,還是用post方式提交給後臺,檔案物件默
認名為Filedata. 比如用asp
的無元件檔案上傳的處理寫法如下 ASP
/Visual Basic複製程式碼
<!–#include FILE=”upload
_5xsoft.inc”–>   
<%   
set upload
=new
upload
_5xsoft 
 
for each formName in upload
.objFile   
  set file=upload
.file(“Filedata”)     
  file.saveAs Server.mappath(file.FileName)   
  set file=nothing   
next   
set upload
=nothing 
 
response.write “ok” 
%>   
      java裡怎麼處理呢?
其實也已有,比如用struts,在actionform裡有一個名為Filedata的FileItem物件即可.
php和aspx就不講了,官方原始檔就是php的例子,也有aspx的例子.

4, 返回結果如何顯示?
比如上面第三步返回一個結果”ok”. 在handlers裡寫上 JavaScript複製程式碼
function uploadSuccess(fileObj, server_data) {   
    try {   
        document.write( server_data);   
    } catch (ex) { this.debug(ex); }   

就這樣簡單.只要知道原理,你可以寫出更復雜的效果.官方原始碼提供了根據上傳圖片生成縮圖並馬上顯示的例子.


相關文章