Uploadify/uploadifive上傳(中文文檔),uploadify中文文檔
Uploadify是一款基於JQuery的優秀的檔案/圖片上傳的外掛程式,有基於Flash和HTML5兩種版本。
Uploadify/uploadifive主要特點有:
1. 多檔案上傳
2. 個人化
3. 上傳進度條顯示
4. 拖拽上傳(HTML5版本)
官網:http://www.uploadify.com
部署
在部署一個Uploadify執行個體前,請確保滿足最低要求:
- 1.jQuery 1.4.x 或更高版本
- 2.Flash Player 9.0.24 或更高版本
- 3.支援PHP, ASP.Net, Cold Fusion的伺服器環境(官方預設支援PHP)
下載最新版本的uploadify,解壓到伺服器根目錄下的uploadify檔案夾中,你可以看到以下檔案:
- Change Log.txt(uploadify的升級日誌,部署時刪掉)
- check-exists.php(用來檢查上傳目標檔案夾裡是否存在相同檔案)
- index.php(官方執行個體)
- jquery.uploadify.js(上傳外掛程式)
- jquery.uploadify.min.js(壓縮版的上傳外掛程式,部署時使用)
- license.txt(許可證檔案,部署時刪掉)
- uploadify.css(上傳控制項樣式表)
- uploadify.php(上傳資料處理檔案)
- uploadify.swf(flash基礎檔案)
- uploadify-cancel.png(取消按鈕圖片)
在官方提供的執行個體檔案中,是引用的jquery官方網站上的jquery庫,有需要的朋友還需要本地引用jquery庫。
下面我們看一看如何在你的項目上部署uploadify:
1.我們假定上傳控制項部署在網站根目錄下的upload.php中,uploadify檔案夾位於網站根目錄中,上傳的檔案儲存在根目錄下的upload檔案夾中,uploadify檔案夾中包含check-exists.php、jquery.min.js 、jquery.uploadify.min.js、uploadify.css、uploadify.swf、uploadify-cancel.png。
2.引用jquery庫
- <script type="text/javascript" src="/uploadify/jquery.min.js"></script>
3.引用uploadify指令碼
- <script type="text/javascript" src="/uploadify /jquery.uploadify.min.js"></script>
4.引用uploadify樣式表
- <link rel="stylesheet" type="text/css" href="uploadify.css" />
5. 聲明一個普通的html檔案上傳控制項,並指定id
- <input id="file_upload" name="file_upload" type="file" multiple="true">
6. 將聲明的普通上傳控制項與Uploadify外掛程式綁定,並初始化
- <script type="text/javascript">
- $(function() {
- $('#file_upload').uploadify({
- 'swf' : '/uploadify uploadify.swf', //指定上傳控制項的主體檔案
- 'uploader' : '/uploadify uploadify.php' //指定伺服器端上傳處理檔案
- //其他配置項
- });
- });
- </script>
屬性
auto布爾型
設定auto為true,當檔案被添加至上傳隊列時,將會自動上傳。
buttonClass字串
為上傳按鈕添加類名。
buttonCursor字串
滑鼠經過上傳按鈕時,滑鼠的形狀。可選值為‘hand’(手形) 和 ‘arrow’(箭頭)。
buttonImage字串
定義“瀏覽”按鈕背景映像的路徑。給按鈕設定背景映像的代碼最好寫在CSS檔案中。
buttonText字串
定義顯示在預設按鈕上的文本。
checkExisting字串
定義檢查目標檔案夾中是否存在同名檔案的指令檔路徑。
debug布爾型
當其值為true時,開啟SWFUpload偵錯模式。
fileObjName字串
定義上傳資料處理檔案中接收資料使用的檔案對象名。
fileSizeLimit整型
上傳檔案大小限制。
fileTypeDesc字串
可選擇的檔案類型的描述。此字串出現在瀏覽檔案對話方塊的檔案類型下拉式功能表中。
fileTypeExts字串
定義允許上傳的檔案尾碼。
formDataJSON對象
定義在檔案上傳時需要一同提交的其他資料對象。
height整型
上傳按鈕的高度(單位:像素)。
itemTemplate布爾型
itemTemplate選項允許你為每一個添加到隊列中選項設定一個不同HTML模板。
method字串
上傳檔案的提交方法,取值'post'或'get'。
multi布爾型
設定值為false時,一次只能選中一個檔案。
overrideEventsJSON
該項定義了一組預設指令碼中你不想執行的事件名稱。
preventCaching布爾型
如果設定為真,一個隨機的值添加到SWF檔案的URL,因此它不會緩衝。
progressData字串
設定顯示在上傳進度條中的資料類型,可選項時百分比(percentage)或速度(speed)。
queueID字串
queueID選項允許你設定一個擁有唯一ID的DOM元素來作為顯示上傳隊列的容器。
queueSizeLimit整型
上傳隊列中一次可容納的最大條數。
removeCompleted布爾型
不設定該選項或者將其設定為false,將使上傳隊列中的項目始終顯示於隊列中,直到點擊了關閉按鈕或者隊列被清空。
removeTimeout整型
設定上傳完成後從上傳隊列中移除的時間(單位:秒)。
requeueErrors布爾型
設定為真時,上傳隊列重設或上傳多次重試時,返回錯誤資訊。
successTimeout整型
表示uploadify的成功等待時間(單位:秒,預設30秒)。
swf字串
定義uploadify.swf的路徑。
uploader字串
定義伺服器端上傳資料處理指令檔uploadify.swf的路徑。
uploadLimit整型
定義允許的最大上傳數量。
width整型
定義瀏覽按鈕的寬度。
事件
onCancel函數
設定onCancel選項,在檔案上傳被取消時,將允許運行一個自訂函數。
onClearQueue函數
設定onClearQueue選項,上傳隊列清空(啟用ancel方法)時,將允許運行一個自訂函數。
onDestroy函數
銷毀Uploadify執行個體(調用destroy方法)時觸發該事件。
onDialogClose函數
當瀏覽檔案對話方塊關閉時觸發該事件。如果該事件被添加到overrideEvents屬性中,在添加檔案到隊列中發生錯誤時,將不會彈出預設錯誤資訊。
onDialogOpen函數
在瀏覽檔案對話方塊被開啟前一瞬觸發該事件。
onDisable函數
調用disable方法禁用Uploadify執行個體時觸發該事件。
onEnable函數
調用disable方法啟用Uploadify執行個體時觸發該事件。
onFallback函數
瀏覽器檢測不到相容版本的Flash時觸發該事件。
onInit函數
調用Uploadify初始化結束時觸發該事件。
onQueueComplete函數
隊列中的所有檔案被處理完成時觸發該事件。
onSelect函數
每添加一個檔案至上傳隊列時觸發該事件。
onSelectError函數
選擇檔案返回錯誤時觸發該事件。每一個檔案返回錯誤都會觸發該事件。
onSWFReady函數
當flash按鈕載入完畢時觸發該事件。
onUploadComplete函數
每一個檔案上傳完成都會觸發該事件,不管是上傳成功還是上傳失敗。
onUploadError函數
上傳失敗時觸發該事件。
onUploadProgress函數
上傳進度更新時觸發該事件。
onUploadStart函數
在開始上傳之前的瞬間會觸發該事件。
onUploadSuccess函數
每一個檔案上傳成功時觸發該事件。
方法
cancel
取消上傳對象。
destroy
銷毀Uploadify執行個體,並返回原檔案域。
disable
控制瀏覽按鈕是否可用。
settings
返回或更新一個Uploadify執行個體的值。
stop
停止當前上傳。
upload
上傳指定檔案或隊列中的所有檔案。