Uploadify是一個通過JQuery實作的檔案上傳插件,帶有檔案上傳進度顯示的效果。作者在日常工作中經常用到的檔案上傳插件就是這個,對這個還算是有一定的了解吧,下面就和大家一起分享一下關于如何使用以及如何配置uploadify。
下面通過一個簡單的示例說明其用法(這裡不會用到所有的參數):
Uploadify jquery 檔案上傳插件使用示例
$(function(){
$('#uploadify').uploadify({
'formData':{
'path':'./file_save_path/'//檔案上傳存放的目錄路徑
},
'swf':'js/uploadify.swf',//選擇檔案按鈕
'uploader':'uploadify.php',//處理檔案上傳的php檔案
'removeCompleted':false,
'width':'130',//選擇檔案按鈕的寬度
'height':'26',//選擇檔案按鈕的高度
'debug':false,
'multi':false,//設定為true時可以上傳多個檔案
'onUploadComplete':function(file){},
'onUploadError':function(file,errorCode,errorMsg){
alert('上傳錯誤:錯誤代碼:'+obj2string(errorCode)+'錯誤消息:'+obj2string(errorMsg));
},
onUploadSuccess:function(file,data,response){}
});
});
uploadify.php 檔案的内容代碼如下:
$file=$_FILES['Filedata'];
$path = isset($_REQUEST['path'])&&!empty($_REQUEST['path'])?daddslashes($_REQUEST['path']):'';
if(!$file['tmp_name']||!$file['name']||!$file['size']){
return false;
}
$path=!empty($path)&&'/'!=substr($path,-1,1)?$path.'/':$path;
$save_name=addslashes($file['name']);
if(!move_uploaded_file($file['tmp_name'],$path.$save_name)){
WriteErrMsg('檔案上傳過程中發生錯誤,請重新上傳');
}
以上代碼簡單的實作了一個上傳的功能,依靠函數uploadify實作,uploadify函數的參數為json格式,可以對json對象的key值的修改來進行自定義的設定,如multi設定為true或false來控制是否可以進行多檔案上傳,下面就來介紹下這些key值的意思:
uploader : uploadify.swf 檔案的相對路徑,該swf檔案是一個帶有文字BROWSE的按鈕,點選後淡出打開檔案對話框,預設值:uploadify.swf。
script : 背景處理程式的相對路徑 。預設值:uploadify.php
checkScript :用來判斷上傳選擇的檔案在伺服器是否存在的背景處理程式的相對路徑
fileDataName :設定一個名字,在伺服器處理程式中根據該名字來取上傳檔案的資料。預設為Filedata
method : 送出方式Post 或Get 預設為Post
scriptAccess :flash腳本檔案的通路模式,如果在本地測試設定為always,預設值:sameDomain
folder : 上傳檔案存放的目錄 。
queueID : 檔案隊列的ID,該ID與存放檔案隊列的div的ID一緻。
queueSizeLimit : 當允許多檔案生成時,設定選擇檔案的個數,預設值:999 。
multi : 設定為true時可以上傳多個檔案。
auto : 設定為true當選擇檔案後就直接上傳了,為false需要點選上傳按鈕才上傳 。
fileDesc : 這個屬性值必須設定fileExt屬性後才有效,用來設定選擇檔案對話框中的提示文本,如設定fileDesc為“請選擇rar doc pdf檔案”,打開檔案選擇框效果如下圖:
fileExt : 設定可以選擇的檔案的類型,格式如:'*.doc;*.pdf;*.rar' 。
sizeLimit : 上傳檔案的大小限制 。
simUploadLimit : 允許同時上傳的個數 預設值:1 。
buttonText : 浏覽按鈕的文本,預設值:BROWSE 。
buttonImg : 浏覽按鈕的圖檔的路徑 。
hideButton : 設定為true則隐藏浏覽按鈕的圖檔 。
rollover : 值為true和false,設定為true時當滑鼠移到浏覽按鈕上時有反轉效果。
width : 設定浏覽按鈕的寬度 ,預設值:110。
height : 設定浏覽按鈕的高度 ,預設值:30。
wmode : 設定該項為transparent 可以使浏覽按鈕的flash背景檔案透明,并且flash檔案會被置為頁面的最高層。 預設值:opaque 。
cancelImg :選擇檔案到檔案隊列中後的每一個檔案上的關閉按鈕圖示,如下圖:
上面介紹的key值的value都為字元串或是布爾類型,比較簡單,接下來要介紹的key值的value為一個函數,可以在選擇檔案、出錯或其他一些操作的時候傳回一些資訊給使用者。
onInit : 做一些初始化的工作。
onSelect :選擇檔案時觸發,該函數有三個參數
event:事件對象。
queueID:檔案的唯一辨別,由6為随機字元組成。
fileObj:選擇的檔案對象,有name、size、creationDate、modificationDate、type 5個屬性。
onSelectOnce :在單檔案或多檔案上傳時,選擇檔案時觸發。該函數有兩個參數event,data,data對象有以下幾個屬性:
fileCount:選擇檔案的總數。
filesSelected:同時選擇檔案的個數,如果一次選擇了3個檔案該屬性值為3。
filesReplaced:如果檔案隊列中已經存在A和B兩個檔案,再次選擇檔案時又選擇了A和B,該屬性值為2。
allBytesTotal:所有選擇的檔案的總大小。
onCancel : 當點選檔案隊列中檔案的關閉按鈕或點選取消上傳時觸發。該函數有event、queueId、fileObj、data四個參數,前三個參數同onSelect 中的三個參數,data對象有兩個屬性fileCount和allBytesTotal。
fileCount:取消一個檔案後,檔案隊列中剩餘檔案的個數。
allBytesTotal:取消一個檔案後,檔案隊列中剩餘檔案的大小。
onClearQueue :當調用函數fileUploadClearQueue時觸發。有event和data兩個參數,同onCancel 中的兩個對應參數。
onQueueFull :當設定了queueSizeLimit并且選擇的檔案個數超出了queueSizeLimit的值時觸發。該函數有兩個參數event和queueSizeLimit。
onError :當上傳過程中發生錯誤時觸發。該函數有event、queueId、fileObj、errorObj四個參數,其中前三個參數同上,errorObj對象有type和info兩個屬性。
type:錯誤的類型,有三種‘HTTP’, ‘IO’, or ‘Security’
info:錯誤的描述
onOpen :點選上傳時觸發,如果auto設定為true則是選擇檔案時觸發,如果有多個檔案上傳則周遊整個檔案隊列。該函數有event、queueId、fileObj三個參數,參數的解釋同上。
onProgress :點選上傳時觸發,如果auto設定為true則是選擇檔案時觸發,如果有多個檔案上傳則周遊整個檔案隊列,在onOpen之後觸發。該函數有event、queueId、fileObj、data四個參數,前三個參數的解釋同上。data對象有四個屬性percentage、bytesLoaded、allBytesLoaded、speed。
percentage:目前完成的百分比
bytesLoaded:目前上傳的大小
allBytesLoaded:檔案隊列中已經上傳完的大小
speed:上傳速率 kb/s
onComplete:檔案上傳完成後觸發。該函數有四個參數event、queueId、fileObj、response、data五個參數,前三個參數同上。response為背景處理程式傳回的值,在上面的例子中為1或0,data有兩個屬性fileCount和speed
fileCount:剩餘沒有上傳完成的檔案的個數。
speed:檔案上傳的平均速率 kb/s
注:fileObj對象和上面講到的有些不太一樣,onComplete 的fileObj對象有個filePath屬性可以取出上傳檔案的路徑。
onAllComplete:檔案隊列中所有的檔案上傳完成後觸發。該函數有event和data兩個參數,data有四個屬性,分别為:
filesUploaded :上傳的所有檔案個數。
errors :出現錯誤的個數。
allBytesLoaded :所有上傳檔案的總大小。
speed :平均上傳速率 kb/s
相關函數介紹
在上面的例子中已經用了uploadifyUpload和uploadifyClearQueue兩個函數,除此之外還有幾個函數:
uploadifySettings:可以動态修改上面介紹的那些key值,如下面代碼
$('#uploadify').uploadifySettings('folder','JS');如果上傳按鈕的事件寫成下面這樣,檔案将會上傳到uploadifySettings定義的目錄中
上傳uploadifyCancel:該函數接受一個queueID作為參數,可以取消檔案隊列中指定queueID的檔案。
$('#uploadify').uploadifyCancel(id);花了一個晚上,終于寫完了,對JQuery這個上傳插件也基本了解了,希望對大家有所幫助,不對之處還望大家指正。