帶進度條的上傳外掛程式

2022-08-17 17:03:21 字數 3021 閱讀 4029

官方網址 

我使用的版本是v3.1 flash 版,

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

基本使用方式請參考官方檔案 documentation/ ( 網路上也很多中文的入門教學 )

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

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 預設的警告視窗都不會跳了唷,

但是不設定的話,警告視窗會跳兩次 ( 預設警告+自己定義的視窗 )

參考檔案 : 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 裡的,

3. 定義上傳成功的動作

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

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

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

//

uploadify的上傳錯誤動作覆寫

var uploadify_onuploaderror = function

(file, errorcode, errormsg, errorstring)

var msgtext = "上傳失敗\n\n";

switch

(errorcode)

alert(msgtext);}//

uploadify的選擇檔案錯誤動作覆寫

var uploadify_onselecterror = function

(file, errorcode, errormsg)

alert(msgtext);

}//uploadify的檔案上傳成功動作覆寫

var uploadify_onuploadsuccess = function(file, data, response)

var phpsid="php的session_id()"; /*

這段是用php

*///

上傳外掛程式的引數設定

var uploadify_imgconfig = /*

傳遞引數

*/};

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

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

參考官方的範例:

documentation/uploadify/using-sessions-with-uploadify/

贊!帶進度條的 jQuery 檔案拖放上傳外掛程式

jquery file uploader 是乙個 jquery 檔案拖放上傳外掛程式,包括ajax上傳和進度條效果。作者編寫這個外掛程式的想法是要保持它非常簡單,不像其他的外掛程式,很多的標記,並提供一些 hack 的方式使之相容那些古老的瀏覽器。jquery file uploader 重點是現代...

贊!帶進度條的 jQuery 檔案拖放上傳外掛程式

jquery file uploader 是乙個 jquery 檔案拖放上傳外掛程式,包括ajax上傳和進度條效果。作者編寫這個外掛程式的想法是要保持它非常簡單,不像其他的外掛程式,很多的標記,並提供一些 hack 的方式使之相容那些古老的瀏覽器。jquery file uploader 重點是現代...

帶進度條的Loading製作

loading的製作已經是個比較老的話題了。但是最近仍然不斷有人問這個問題,畢竟什麼時候都有初學者嘛。換個角度看,這也說明我們的閃客隊伍是在不斷漲大,倒是個可喜的現象。也給了我動力,來寫這篇文章,給入門者提供乙個較為詳細的教程。好,我們開始。loading一般可以用兩幀來製作,放在動畫的最前面。如果...