struts+swfupload实现批量图片上传（上）：swfupload
?custom_settings調用方法 this.customSettings.cancelButtonId
縮略圖js?
//this.startResizedUpload(this.getFile(0).ID, this.customSettings.thumbnail_width, this.customSettings.thumbnail_height, SWFUpload.RESIZE_ENCODING.JPEG, this.customSettings.thumbnail_quality, false); 替換this.startUpload();
完成文件入列隊（fileQueued） →
完成選擇文件（fileDialogComplete） → 開始上傳文件（uploadStart） → 上傳處理（uploadProgress） → 上傳成功（uploadSuccess） → 上傳完成（uploadComplete）? →列隊完成（queueComplete）
如上所示，單選文件順序執行以上回調函數，需要注意的是選擇多個文件，fileQueued、queueComplete只會執行一次，而fileDialogComplet...→ uploadComplete每個文件都執行一次。
use_query_string? 該屬性可選值為true和false，設置post_params是否以GET方式發送。如果為false，那么則以POST形式發送。
post_params 定義的是一個包含值對的object類型數據，每個文件上傳的時候，其中的值對都會被一同發送到服務端。
prevent_swf_caching 默認值：true
(v2.2.0新增)該布爾值設置是否在Flash URL后添加一個隨機值，用來防止瀏覽器緩存了該SWF影片。這是為了解決一些基于IE-engine的瀏覽器上的出現一個BUG。
button_action默認值：SWFUpload.BUTTON_ACTION.SELECT_FILES(多文件上傳)
(v2.2.0新增) 設置Flash Button點擊以后的動作。默認為SWFUpload.BUTTON_ACTION.SELECT_FILES，點擊按鈕將會打開多文件上傳的對話框。 如果設置為SWFUpload.BUTTON_ACTION.SELECT_FILE，則為單文件上傳。如果設置為 SWFUpload.BUTTON_ACTION.START_UPLOAD，則啟動文件上傳。
file_post_name : "Filedata" ,默認值： Filedata
該參數設置了POST信息中上傳文件的name值（類似傳統Form中設置了<input type="file" name="uploadImg"/>的name屬性）。
<input id="btnCancel" type="button" value="取消全部" οnclick="swfu.cancelQueue();"/>
<input id="btnCancel" type="button" value="上傳相片" οnclick="swfu.startUpload();"/>
?
File Object
File Object包含了一組可用的文件屬性，很多處理事件都會傳遞一個File Object參數來訪問該文件的相關屬性。
{
id : string, // SWFUpload控制的文件的id,通過指定該id可啟動此文件的上傳、退出上傳等
index : number, // 文件在選定文件隊列（包括出錯、退出、排隊的文件）中的索引，getFile可使用此索引
name : string, // 文件名，不包括文件的路徑。
size : number, // 文件字節數
type : string, // 客戶端操作系統設置的文件類型
creationdate : Date, // 文件的創建時間
modificationdate : Date, // 文件的最后修改時間
filestatus : number // 文件的當前狀態，對應的狀態代碼可查看SWFUpload.FILE_STATUS
}
Stats Object
該對象提供了上傳隊列的狀態信息，訪問實例的getStats方法可獲取此對象。
該對象包括下面屬性：
{
in_progress : number // 值為1或0，1表示當前有文件正在上傳，0表示當前沒有文件正在上傳
files_queued : number // 當前上傳隊列中存在的文件數量
successful_uploads : number // 已經上傳成功（uploadSuccess觸發）的文件數量
upload_errors : number // 已經上傳失敗的文件數量 (不包括退出上傳的文件)
upload_cancelled : number // 退出上傳的文件數量
queue_errors : number // 入隊失敗（fileQueueError觸發）的文件數量
}
所有這些屬性的值都可以使用setStats方法來修改，除了in_progress 和 files_queued。
成功上傳個數
this.getStats().successful_uploads
等待上傳個數
swfUploadInstance.getStats().files_queued;
swfupload_loaded_handler
該事件函數是內部事件，因此不能被重寫。當SWFupload實例化，加載的FLASH完成所有初始化操作時觸發此事件。
file_dialog_complete_handler : fileDialogComplete
如果你希望在用戶選擇完文件后自動開始上傳操作，那么可以將 this.startUpload() 操作放在這里 。如果想選擇 后單獨上傳就不要加入 file_dialog_complete_handler : fileDialogComplete，或加入里面不能有this.startUpload()
?
function fileDialogComplete(numFilesSelected, numFilesQueued) {try {if (numFilesSelected > 0) {document.getElementById(this.customSettings.cancelButtonId).disabled = false;}/* I want auto start the upload and I can do that here */if(this.settings.auto_upload){//是否要上傳this.startUpload();}} catch (ex) {this.debug(ex);} }?
支持一鍵批量上傳
function uploadComplete(file) {try {/* I want the next upload to continue automatically so I'll call startUpload here */if (this.getStats().files_queued > 0) {//this.startResizedUpload(this.getFile(0).ID, this.customSettings.thumbnail_width, this.customSettings.thumbnail_height, SWFUpload.RESIZE_ENCODING.JPEG, this.customSettings.thumbnail_quality, false);this.startUpload();} else {var progress = new FileProgress(file, this.customSettings.upload_target);progress.setComplete();progress.setStatus("All images received.");progress.toggleCancel(false);}} catch (ex) {this.debug(ex);} }?系統默認的js是swfupload.js，其他的都是自己開發修改的添加捕獲事件函數如handlers.js。 file上傳前的圖片信息，serverData接收服務端字符串并轉為數組類型，可以返回處理后的圖片信息。后臺處理程序必須 返回輸出 字符串（json_encode轉換或拼接等）
function uploadSuccess(file, serverData) {var isSuccess = (serverData.indexOf("successed")==0?true:false);try {if(isSuccess){//上傳成功回調var tr = document.getElementById(file.id);tr.style.color="green";var bar = document.getElementById(file.id+"_bar");bar.parentNode.innerHTML="上傳成功";var delObject = document.getElementById(file.id+"_del");delObject.parentNode.innerHTML=" ";document.getElementById(this.customSettings.myFileListTarget+"Count").innerHTML=this.getStats().files_queued;//addImage("index.php?r=site/Thumb&id=" + serverData.substring(7)); //縮略圖的顯示 }else{var tr = document.getElementById(file.id);tr.style.color="red";var bar = document.getElementById(file.id+"_bar");bar.parentNode.innerHTML="上傳失敗:"+serverData;var delObject = document.getElementById(file.id+"_del");delObject.parentNode.innerHTML=" ";}} catch (ex) {this.debug(ex);} }功能完全支持ie和firefox瀏覽器！同樣也支持safari瀏覽器！
一般的WEB方式文件上傳只能一個一個的進行上傳，在某些應用上就顯得很不人性化，客戶們都希望能夠1次選擇很多文件，然后讓系統把選擇的文件全部上傳。
有些朋友看到這里，就知道了，其實就是swfupload方法，具體信息可以訪問swfupload官方網站：http://www.swfupload.org/
讓我們先來看看客戶端的界面效果圖。（多選文件，批量上傳，上傳進度顯示）
要做到圖中的效果，其實很方便，看完下面的描述，相信大家都可以實現上圖中的效果了。
說明：swfupload2中通過一個png圖片與flash插件進行關聯，可以修改images下的png圖片來（如上圖中的[選擇文件]圖片）自定義顯示自己想要的圖片樣子（不要修改圖片名字和格式）。
?本文轉載于：http://hudeyong926.iteye.com/blog/904373
轉載于:https://www.cnblogs.com/ningvsban/archive/2012/12/24/2831480.html
總結
以上是生活随笔為你收集整理的struts+swfupload实现批量图片上传（上）：swfupload的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js导航条 二级滑动 模仿块级作用
- 下一篇： cookie 和session 的区别