swfupload 的ASP上傳範例程式碼

來源:互聯網
上載者:User

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

差異具體體現在:
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 的容器之間實現直接通訊的APIExternalInterface(詳見後文附錄),

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); }   

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.