差異具體體現在:
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對象。
復制代碼 代碼如下:
<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的寫法
復制代碼 代碼如下:
<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的無組件文件上傳的處理寫法如下
復制代碼 代碼如下:
<!--#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里寫上
復制代碼 代碼如下:
function uploadSuccess(fileObj, server_data) {
try {
document.write( server_data);
} catch (ex) { this.debug(ex); }
}
就這樣簡單.只要知道原理,你可以寫出更復雜的效果.官方源代碼提供了根據上傳圖片生成縮略圖并馬上顯示的例子.