要寫一個上傳文件插件,本來想自己寫來着。可是又考慮到各大瀏覽器兼容問題,汗!!所以就想到了jq這個可愛的孩子。功夫不負有心人總算找到了這個插件!!名曰:uplodify!!!
Uploadify 是一個JQuery插件,它協助你輕鬆簡單的將一個或多個文件上傳至你的網站。
它需要Flash控件和後臺開發語言的支持,豐富的參數配置,同時也簡單易用,讓你輕鬆上手。
官方網站:http://www.uploadify.com/
官方示例:http://www.uploadify.com/demo/
開發文檔:http://www.uploadify.com/documentation/
插件下載:http://www.uploadify.com/download/
·參考文獻
(PS:我是在這篇文章裏知道這世界上有這樣一個插件的 ^_^ 裏面有後臺C#代碼)
易用的JQuery上傳插件Uploadify
http://css9.net/jquery-muti-file-upload-uploadify/
·參數
uploader
設置uploadify.swf文件的相對或絕對路徑。默認值:'uploadify.swf'
script
設置用於處理文件上傳的後臺程序頁面的相對或絕對路徑。默認值:'upload.php'
checkScript
設置用於檢查規則的後臺程序頁面的相對或絕對路徑。
scriptData
一個鍵值對應的數據,它將連同文件一起傳給後臺程序頁面。示例:{'name':'value'}
fileDataName
設置上傳控件的名稱。默認值:'Filedata'
method
設置scriptData提交的方式。可選值:GET,POST 默認值:'POST'
scriptAccess
設置Flash的訪問模式。如果是本地測試,可設置爲'always'。默認值:'sameDomain'
folder
設置文件保存的目錄。不能以'/'結束。
queneID
設置文件隊列裏的元素的ID,默認情況下,在點擊瀏覽按鈕後 自動創建。
queueSizeLimit
設置文件隊列的最大值。默認值:999
multi
設置爲true表示允許上傳多個文件。
auto
設置爲true表示當選擇一件附件後,自動開始上傳。
fileDesc
設置文件瀏覽對話框中的文件類型下拉框的顯示文本。
fileExt
設置允許上傳的文件類型,如:'*.ext1;*. ext2;*.ext3'。如果設置此選項,則必須設置fileDesc。
sizeLimit
設置允許的單文件大小。單位:字節
simUploadLimit
設置同時上傳文件的數量。默認值:1
buttonText
設置上傳按鈕的文本。默認值:'BROWSE'
buttonImg
設置瀏覽按鈕的圖片。
hideButton
設置爲true則隱藏按鈕圖片。
rollover
Set to true if you would like to activate rollover states for your browse button. To prepare your browse button for rollover states, simple add the ‘over’ and ‘press’ states below the normal state in a single file.
width
設置按鈕圖片和flash文件的寬度。默認值:30
height
設置按鈕圖片或flash文件的高度。如果rollover爲true,則是實際大小的1/3。默認值:110
wmode
設置爲transparent則flash的背景將變成透明,並且在頁面所有元素的最頂層。默認值:'opaque'
cancelImg
設置取消按鈕的圖片路徑。默認值:cancel.png
on
當插件加載時觸發此事件,默認會將頁面上的目標元素轉換成flash文件並添加容器,如果返回false則不會執行此動作。
on
當選中一個文件後觸發此事件,默認會創建一個6位的隨機編號的元素,並加入到文件隊列中,如果返回false則不會執行此動作。
此事件有三個參數:
event: javas
queueID: 選中文件的編號
fileObj: 一個包含文件詳細信息的對象。
name – 文件名稱
size – 文件的大小(字節)
creationDate – 文件的創建時間
modificationDate – 文件的修改時間
type – 文件的擴展名(包括'.')
on
當執行選中操作時觸發此事件,該事件沒有默認的處理程序。
此事件有兩個參數:
event: javas
da
fileCount – 隊列中的文件總數
filesSelected – 在選擇操作中選中的文件數
filesReplaced – 在隊列中被替換的文件數
allBytesTotal – 隊列中所有文件的大小(字節)
on
當一個文件上傳被取消或在隊列中被刪除時觸發此事件。默認事件將會將此文件的名稱從隊列中移除,如果返回false則不執行此動作。
此事件有四個參數:
event: javas
queueID: 被取消(移除)的文件的編號
fileObj: 被取消(移除)的文件的詳細信息。(見on
da
fileCount – 在文件隊列中剩餘的文件的數量
allBytesTotal – 在文件隊列中剩餘的文件的大小(字節)
on
當調用fileUploadClearQueue函數時觸發此事件。默認事件會移除文件隊列中的所有元素,如果返回false則不執行此動作。
此事件有兩個參數:
event: javas
da
fileCount – 上傳隊列的文件數
allBytesTotal – 上傳隊列的獸性大小(字節)
on
當隊列達到設定的最大值後觸發此事件,默認事件會提示用戶隊列數量。
此事件有兩個參數:
event: javas
queueSizeLimit: 隊列最大值。
on
當上傳文件發生異常時觸發此事件,默認事件會將元素變成紅色並提示相應的錯誤信息。
此事件有四個參數:
event: javas
queueID: 發生錯誤的元素的唯一編號。
fileObj: 發生錯誤的元素的文件詳細信息。(見on
errorObj: 發生錯誤時的錯誤詳細信息。
type – 分別是:'HTTP', 'IO', 'Security'三者之一
info – 錯誤信息描述
on
當選擇一個文件後,Flash文件初始化此文件時觸發此事件。沒有默認事件。
此事件有三個參數:
event: javas
queueID: 文件的元素的唯一編號。
fileObj: 文件的詳細信息。
on
當上傳文件時,進度發生改變時觸發此事件。默認事件會更新文件隊列中的進度條。如果返回false則不執行此動作。
此事件有四個參數:
event: javas
queueID: 文件的元素的唯一編號。
fileObj: 文件的詳細信息。
da
percentage – 當前文件上傳完成的百分比。
bytesLoaded – 當前文件已上傳的字節數
allBytesLoaded – 文件的總字節數
speed – 當前上傳的速度(KB)
on
當文件上傳完成後觸發此事件,默認事件會更新文件隊列的相關狀態。如果返回false則不執行此動作。
此事件有五個參數:
event: javas
queueID: 文件的元素的唯一編號。
fileObj: 文件的詳細信息。
response: 從服務器發回的數據。
da
fileCount – 文件隊列的文件總數
speed – 文件上傳的平均速度(KB)
on
當所有文件上傳完畢後觸發此事件。沒有默認事件。
此事件有兩個參數:
event: javas
da
filesUploaded – 此次上傳的文件數量
errors – 上傳過程的錯誤次數
allBytesLoaded – 此次上傳的文件總大小(字節)
speed – 此次上傳的平均速度(KB)
on
當檢查到服務器已存在此文件時觸發此事件,默認事件是彈出確認框。
此事件有五個參數:
event: javas
checkScript: 檢查文件的後臺程序頁面。
fileQueue: 一個隊列({'唯一編號','文件名稱'}的對象。
folder: 上傳的路徑。
single: 如果爲true表示只有一個文件正準備上傳至服務器。
·方法
uploadifySettings(setting, value)
用於獲取或設置插件的參數。
獲取:#(’#someID’).uploadifySettings(’queueSize’);
設置:$(’#someID’).uploadifySettings(’folder’,'/uploads’);
uploadifyUpload([queueID])
用於開始上傳一個或所有文件。
示例:$(’#someID’).uploadifyUpload();
uploadifyCancel(queueId)
用於停止上傳或隊列中取消一個文件。
示例:$(’#someID’).uploadifyCancel(’NFJSHS’);
uploadifyClearQueue()
用於清除當前文件隊列中的所有文件。
示例:$(’#someID’).uploadifyClearQueue();
我簡單的試了一下感覺不錯,呵呵!!
所以啊,我們程序員要學會偷懶,學會開闢那些新的領域!!在摸索中前進,在前進中摸索!!要自信,別把程序看的很難,再難的程序也是人寫出來的!!加油,我們這些菜鳥級的經典人物早晚回成爲老鳥!!古董級人物的!!come on!!!