楓葉筆記本

/* 2012.8.8 Maple 撰寫

2012.10.24 Maple 修改*/

官方網址 http://www.uploadify.com/

我使用的版本是 v3.1 Flash 版，

相關的介紹就不用了吧...總之是個好用的工具，而且提供的參數也很夠用。

基本使用方式請參考官方文件 http://www.uploadify.com/documentation/ ( 網路上也很多中文的入門教學 )

 

我需要調整按鈕樣式 + 警告視窗模式改用 JQuery 的 dialog + 改成中文訊息

所以就產生了以下的文章了 ( 改了快一整天阿 ... 結果改到一半我就在 Key 這篇文章 ... |||| ) 

 

1.修改按鈕的樣式

修改下載檔案中的 css 檔案即可，亦可使用官方提供的參數 buttonClass 增加 class 名稱

因為我還要改 :hover 跟 :active ，所以我是直接改 uploadify 的 css 比較快

 

2.修改警告視窗的文字，有兩個方式，先說比較省力的

[ 方法1 ]

直接修改下載檔案中的 jquery.uploadify-3.1.js 檔案，把訊息的部份中文化 ( 夠省力了吧! 還可以把 alert 的呼叫改掉 ) 當然載入的時候就要載入這個 js ，我想應該不會有人改了這個檔案卻載入 min.js 吧....  其中需要注意的是，在參數中不可以設定 overrideEvents : [ 'onDialogClose' ] ， 因為設了就不會跳警告視窗啦，除非是要自己撰寫事件處理 ( 請看方法2 )

[ 方法 2  ]

乖乖的覆寫事件，也可以與 [方法 1] 併用   1.設定要覆寫的事件  使用官方提供的參數 overrideEvents : [ 'onDialogClose' , 'onUploadError' , 'onSelectError' ] 注意 onDialogClose 設定覆寫後，uploadify 預設的警告視窗都不會跳了唷， 但是不設定的話，警告視窗會跳兩次 ( 預設警告+自己定義的視窗 ) 參考文件 : http://www.uploadify.com/forum/#/discussion/8282 其實我測試的結果，好像 overrideEvents 只需要寫 onDialogClose 就可以了....其他沒設定好像也沒差....   2.修改相關的事件 onUploadError : function(file, errorCode, errorMsg, errorString) {} onSelectError : function(file, errorCode, errorMsg) {} 由於宣告覆寫 onDialogClose 的關係，若要使用 uploadify 回傳的錯誤訊息，不要使用 this.queueData.errorMsg 而是用 function 中接收的參數 errorMsg ( 好奇的人可以自己試 ，就會知道為什麼了 ) 若不想要使用預設的錯誤訊息，就參考下面的錯誤代碼自己定義吧    3.錯誤事件的代號 其實是看 jquery.uploadify-3.1.js 裡的， [ Queue Error ] QUEUE_LIMIT_EXCEEDED : -100, FILE_EXCEEDS_SIZE_LIMIT : -110, ZERO_BYTE_FILE : -120, INVALID_FILETYPE : -130 [ Upload Error ] HTTP_ERROR : -200, MISSING_UPLOAD_URL : -210, IO_ERROR : -220, SECURITY_ERROR : -230, UPLOAD_LIMIT_EXCEEDED : -240, UPLOAD_FAILED : -250, SPECIFIED_FILE_ID_NOT_FOUND : -260, FILE_VALIDATION_FAILED : -270, FILE_CANCELLED : -280, UPLOAD_STOPPED : -290

 

3. 定義上傳成功的動作

這個我就不詳細說明了，大家動作都不一樣嘛~

總之，覆寫 onUploadSuccess : function(file, data, response) {}

一直忘記補上程式碼～我將我寫好的程式碼稍微改一下放上來～

//uploadify的上傳錯誤動作覆寫
var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) {
	if(errorCode==-280||errorCode==-290)	//使用者自己取消的動作不再跳訊息視窗
	{
		return ;	
	}
	var msgText = "上傳失敗\n\n";
	switch(errorCode)
	{
		case -200:
			msgText += "HTTP 錯誤\n"+errorMsg;
			break;
		case -210:
			msgText += "上傳檔案遺失，請重新操作";
			break;
		case -230:
			msgText += "安全性錯誤\n"+errorMsg;
			break;
		case -240:
			msgText += "上傳檔案數量最多 "+this.settings.uploadLimit+" 個";
			break;
		case -250:
			msgText += "上傳失敗\n"+errorMsg;
			break;
		case -260:
			msgText += "找不到指定檔案的ID，請重新操作";
			break;
		case -270:
			msgText += "參數錯誤";
			break;
		case -280:
			msgText += file.name+"\n檔案上傳被取消";
			break;
		case -290:
			msgText += file.name+"\n檔案上傳被停止";
			break;
		default:	
			msgText += "檔案:"+file.name+"\n錯誤代號:"+errorCode+"\n"+errorMsg+"\n"+errorString;
	}
	alert(msgText);
}
//uploadify的選擇檔案錯誤動作覆寫
var uploadify_onSelectError = function(file, errorCode, errorMsg) {
		var msgText = "上傳失敗\n\n";
		switch(errorCode)
		{
			case -100:
				msgText += "單次上傳的檔案最多 "+this.settings.queueSizeLimit+" 個";
				break;
			case -110:
				msgText += "檔案大小超過限制( "+this.settings.fileSizeLimit+" )";
				break;
			case -120:
				msgText += "檔案大小為 0，不可上傳";
				break;
			case -130:
				msgText += "檔案格式不正確，限 "+this.settings.fileTypeExts;
				break;
			default:	
				msgText += "錯誤代號:"+errorCode+"\n"+errorMsg;
		}
		alert(msgText);
  }
//uploadify的檔案上傳成功動作覆寫
var uploadify_onUploadSuccess = function(file, data, response) {	/*成功動作*/
		alert(file.name + "\n\n" + response + "\n\n" + data);
}

var phpsid="PHP的session_id()"; /*這段是用php*/
//上傳插件的參數設定
var uploadify_imgConfig = {
	width : 80,
	removeTimeout : 1,
	fileObjName  : 'uploadFile',
	fileSizeLimit : "20MB",
	queueSizeLimit: 5,	/*單次上傳最多5個*/
	successTimeout: 60,	/*等待服務器處理文件的時間，默認30s，當超過時，就認為文件已經正確上傳*/
	queueID	 : "uploadifyStatusBox",	/*指定進度條都出現在此div中(id="uploadifyStatusBox")*/
	swf : "plugin/uploadify/uploadify.swf",
	uploader : "uploadAction.php",			/*上傳處理*/
	/*覆寫onDialogClose的原因請看 http://www.uploadify.com/forum/#/discussion/8282/alert-box-flash-version/p1 
	設定後，uploadify的警告視窗都不會跳，所以需要跳訊息的都要設定*/
	overrideEvents : ['onDialogClose','onUploadSuccess','onUploadError','onSelectError'],
	onUploadSuccess : uploadify_onUploadSuccess,
	onUploadError : uploadify_onUploadError,
	onSelectError : uploadify_onSelectError,
	buttonText : "新增圖片",
	/*chrome附檔名只能顯示"自定檔"，但有生效，另外chrome及ff無法遮蔽捷徑檔*/
	fileTypeExts : "*.gif; *.jpg; *.jpeg; *.png",
	fileTypeDesc:"圖片檔",
	/* chrome跟ie9利用Flash送出後還能抓到session，但ff不行，官網說這是flash版的bug
	官方建議的解決方法 http://www.uploadify.com/documentation/uploadify/using-sessions-with-uploadify/  */
	formData : {"action":"uploadAtt","sid":phpsid}	/*傳遞參數*/

};
$("#上傳按鈕id").uploadify(uploadify_imgConfig);

我的程式有用到div (id="uploadifyStatusBox") 集中顯示進度條及 var phpsid = PHP 的 session_id() ，要copy程式碼時，記得要修改這兩處。