工做日誌(一)、jquery上傳插件uploadify的使用

8月16號，北京，開始了正式的工做，來到公司第一個任務就是用uploadify插件作上傳圖片和預覽功能，uploadify對本身來講是完陌生的，只有從頭學起，下面就是個人學習之旅。

首先介紹下uploadify 的版本，官網上的最新版本3.1，小編一直是追求最新的，因此果斷下最新的（反正老版本也沒用過。。）。

官方介紹是用php的，小編是弄Java的，因此要改爲Java，簡單介紹下小例子。

 

$(「#id」).uploadify({

'swf':js/jquery.uploadify-v2.1.0/uploadify.swf'

'uploader': ‘${ctx}/editPicshare.do’,     //[必須設置]上傳文件觸發的url,servlet的路徑

'method' : 'get', // 若是要傳參數，就必須改成GET

'queueID' : queueID,// 顯示上傳文件隊列的元素id，能夠簡單用一個div來顯示

'auto': false, //是否自動上傳

'multi': true //是否容許一次上傳多個

'onUploadSuccess'：function(file,data, response){//上傳成功時觸發事件，每一個文件都觸發一次

    }
});    

 

 

接下來介紹下詳細的參數使用：

id: jQuery(this).attr('id'),//綁定的input的ID

langFile: 'http://www.static-xxx.nu/uploader/uploadifyLang_en.js',//語言包的路徑，能設置全部的提示文字

swf: 'http://www.static-xxx.nu/uploader/uploadify.swf',//[必須設置]swf的路徑

uploader: '/uploadify/galleri.php',//[必須設置]上傳文件觸發的url

auto:false,//文件選擇完成後，是否自動上傳

buttonText:'上傳圖片',//上傳按鈕的文字

height: 30,//上傳按鈕的高和寬

width: 120,

buttonCursor: 'pointer',//上傳鼠標hover後Cursor的形狀

cancelImage: 'http://www.static-xxx.nu/uploadify-cancel.png',//[必須設置]取消圖片的路徑

checkExisting:'/uploader/uploadify-check-existing.php',//檢查上傳文件是否存，觸發的url，返回1/0

debug: true,//debug模式開/關，打開後會顯示debug時的信息

fileObjName:'file',

fileSizeLimit : 0,//文件的極限大小，以字節爲單位，0爲不限制。1MB:1*1024*1024

fileTypeDesc: 'Bild JPG',//容許上傳的文件類型的描述，在彈出的文件選擇框裏會顯示

fileTypeExts: '*.jpg',//容許上傳的文件類型，限制彈出文件選擇框裏能選擇的文件

method: 'post',//和後臺交互的方式：post/get

multi: true,//是否能選擇多個文件

queueID: 'fileQueue',//顯示上傳文件隊列的元素id，能夠簡單用一個div來顯示

queueSizeLimit : 999,//隊列中容許的最大文件數目

progressData : 'all', //隊列中顯示文件上傳進度的方式：all-上傳速度+百分比，percentage-百分比，speed-上傳速度

removeCompleted : true,//上傳成功後的文件，是否在隊列中自動刪除

removeTimeout: 3,

requeueErrors : true,

postData: {},//和後臺交互時，附加的參數

preventCaching : true,

transparent: true,

successTimeout : 30,//上傳時的

timeoutuploadLimit:999//能同時上傳的文件數目

設置的事件：

onDialogClose : function(swfuploadifyQueue) {//當文件選擇對話框關閉時觸發

if( swfuploadifyQueue.filesErrored > 0 ){

       alert( '添加至隊列時有' +swfuploadifyQueue.filesErrored +'個文件發生錯誤n' +'錯誤信息:' +swfuploadifyQueue.errorMsg +'n選定的文件數:' +swfuploadifyQueue.filesSelected +'n成功添加至隊列的文件數:' +swfuploadifyQueue.filesQueued +'n隊列中的總文件數量:' +swfuploadifyQueue.queueLength);

} }

onDialogOpen : function() {//當選擇文件對話框打開時觸發

alert( 'Open!');

}

onSelect : function(file) {//當每一個文件添加至隊列後觸發

alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 建立日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態: ' + file.filestatus);

}

onSelectError : function(file,errorCode,errorMsg) {//當文件選定發生錯誤時觸發

alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 建立日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態: ' + file.filestatus + ' - 錯誤代碼: ' + + ' - 錯誤信息: ' + errorMsg);

}

onQueueComplete : function(stats) {//當隊列中的全部文件所有完成上傳時觸發

alert( '成功上傳的文件數: ' + stats.successful_uploads + ' - 上傳出錯的文件數: ' + stats.upload_errors + ' - 取消上傳的文件數: ' + stats.upload_cancelled + ' - 出錯的文件數' + stats.queue_errors);

}

onUploadComplete : function(file,swfuploadifyQueue) {//隊列中的每一個文件上傳完成時觸發一次

alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 建立日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態: ' + file.filestatus + ' - 出錯的文件數: ' + swfuploadifyQueue.filesErrored + ' - 錯誤信息: ' + swfuploadifyQueue.errorMsg + ' - 要添加至隊列的數量: ' + swfuploadifyQueue.filesSelected + ' - 添加至對立的數量: ' + swfuploadifyQueue.filesQueued + ' - 隊列長度: ' + swfuploadifyQueue.queueLength);

}

onUploadError : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {//上傳文件出錯是觸發（每一個出錯文件觸發一次）

alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 建立日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態: ' + file.filestatus + ' - 錯誤代碼: ' + errorCode + ' - 錯誤描述: ' + errorMsg + ' - 簡要錯誤描述: ' + errorString + ' - 出錯的文件數: ' + swfuploadifyQueue.filesErrored + ' - 錯誤信息: ' + swfuploadifyQueue.errorMsg + ' - 要添加至隊列的數量: ' + swfuploadifyQueue.filesSelected + ' - 添加至對立的數量: ' + swfuploadifyQueue.filesQueued + ' - 隊列長度: ' + swfuploadifyQueue.queueLength);

}

onUploadProgress : function(file,fileBytesLoaded,fileTotalBytes, queueBytesLoaded,swfuploadifyQueueUploadSize) {//上傳進度發生變動時觸發

alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 建立日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態: ' + file.filestatus + ' - 當前文件已上傳: ' + fileBytesLoaded + ' - 當前文件大小: ' + fileTotalBytes + ' - 隊列已上傳: ' + queueBytesLoaded + ' - 隊列大小: ' + swfuploadifyQueueUploadSize);

}

onUploadStart: function(file) {//上傳開始時觸發（每一個文件觸發一次）

alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 建立日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態: ' + file.filestatus );

}

onUploadSuccess : function(file,data,response) {//上傳完成時觸發（每一個文件觸發一次）

 

alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + '- 建立日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態: ' + file.filestatus + ' - 服務器端消息: ' + data + ' - 是否上傳成功: ' + response);

}  

 

以上就是在下區區這幾天所瞭解的，(注：以上內容均搜自互聯網，整理而成)

但願對你們的學習工做有所幫助。