7/26/2011

uploadify jQuery+php 多檔上傳套件

uploadify
http://www.uploadify.com
uploadify 是一個jQuery+php 多檔上傳套件

基本安裝




[html language=""]
<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'auto' : true
});
});
</script>
[/html]

[html title="body"]<input id='file_upload' name='file_upload' type='file' />[/html]

OPTION


(boolean) auto 啟用自動選項會自動開始上傳文件時添加到文件上傳隊列 'auto'        : true (string)
buttonImg
設定上傳按鈕圖片
'buttonImg'   : '/uploadify/button.jpg'

(string)
buttonText
顯示在按鈕上的文字

(string)
cancelImg
The path to an image you would like to use as the cancel button.

(string)
checkScript
檢查檔案是否已在伺服器上的腳本的路徑

(string)
displayData
顯示百分比或每秒幾k
'percentage' / 'speed' 

(string)
expressInstall
The path to the expressInstall.swf file.
提示安裝flashplayer的樣子 

(string)
fileDataName
指定上傳後要傳進哪個變數
'fileDataName' : 'myuploadify' 後會在php傳進 $_FILES['myuploadify']

(string)
fileDesc
顯示檔案類型的描述在"瀏覽"
'fileDesc'    : '網頁圖片 (.JPG, .GIF, .PNG)' 

(string) fileExt 限制上傳的附檔名或檔名 'fileExt'     : '*.jpg;*.gif;*.png'

(string) folder 上傳後存放的資料夾

(integer)
height
"瀏覽"按鈕的高度

(boolean)
hideButton
隱藏按鈕,主要是之後利用 DIV + css 符合你的顯示風格

(string)
method
傳值類型, 'POST' or 'GET' 預設是 'POST'

(boolean) multi 允許多檔上傳

(string)
queueID
設置顯示隊列的DIV之類的容器 ID ,未設置時會在瀏覽按鈕下方產生一個

(integer) queueSizeLimit 同時可以存在幾個任務(檔案)

(boolean)
removeCompleted
自動移動已上傳完的檔案列表,預設true
(boolean)
rollover
顯示按鈕的滑鼠事件,如於按鈕上'HOVER' 未於按鈕上'OFF' 按下'PRESSED'

(string)
script
後台處理程序的相對路徑。默認值:uploadify.php

(string)
scriptAccess
swf檔的連接方式 預設和正式時用'sameDomain' 最好只在測試時 'always' 或不設(和FLASH不熟…)

(JSON object with mixed types)
scriptData
夾帶JSON資料傳送…沒研究
An object containing name/value pairs with additional information that should be sent to the back-end script when processing a file upload.

(integer)
simUploadLimit
同時上傳的檔案數,超過可以排在隊列

(integer) sizeLimit 限制每一個上傳檔案的 bytes 數(string)
uploader
uploadify.swf 文件的路徑

(integer)
width
瀏覽按鈕的寬度

(string)
wmode
設'transparent'可使FLASH的背景變透明

EVENTS 事件
(function)
onAllComplete
隊列所有檔案完成上傳時
data.
[filesUploaded] - 總上傳檔案
[errors] - 錯誤數
[allBytesLoaded] - 總上傳Bytes
[speed] - 速度, KB/s
[html]$(#file_upload).uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'onAllComplete' : function(event,data) {
alert(data.filesUploaded + ' 個檔案上傳完成!');
}
});[/html]
(function)
onCancel
有檔案被取消時
'onCancel' : function(event,ID,fileObj,data) {
alert('The upload of ' + fileObj.name + ' has been canceled!');
}
(function)
onCheck
任務開始前確認檔案名是否存在,存在時會確認覆蓋
要搭配'checkScript' : '/uploadify/check.php'

(function)
onClearQueue
呼叫 uploadifyClearQueue() 清除任務時

(function)
onComplete
單個檔案完成時

(function)
onError
發生錯誤時

(function)
onInit
Uploadify 讀進來時

(function)
onOpen
檔案開始上傳前

(function)
onProgress
每次進度條變化時

(function)
onQueueFull
任務數量達到 queueSizeLimit 最大上傳數時

(function)
onSelect
檔案加入任務時(每個檔案觸發)

(function)
onSelectOnce
檔案加入任務時(加入一次觸發一次)

(function)
onSWFReady
swf物件讀入時

.uploadify()
實作一個 Uploadify uploader.
.uploadifyCancel()
取消移除上傳中檔案

.uploadifyClearQueue()
取消移除上傳中任務(所有檔案)

.uploadifySettings()
修改 目前Uploadify 設定

.uploadifyUpload()
開始上傳

沒有留言:

張貼留言