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 的区别
