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