jquery 的 Uploadify 參數

Uploadify有一個參數是 buttonText 這個無論你怎麼改都不支援中文，因為插件在js裡用了一個轉碼方法把這個參數的值轉過碼了，解碼的地方在那個swf檔案裡，看不到代碼，是以這條路不行。

另一個參數，網上很少提到，是 buttonImg( 按鈕圖檔)，這時你完全可以用一個圖檔來替換掉插件自帶的那個黑色的flash浏覽按鈕，隻要你自己的圖檔上是中文，這不就解決了中文按鈕問題麼？如果隻加這一個，你會發現你的按鈕圖檔下面有一片白色區域，其實就是那個flash留下的，白色區域表示滑鼠可用範圍，這個範圍可以用width,height來調整。還有一個參數 wmode 它的預設值是opaque，把它改成transparent就行了，也就是把那片白色區域透明化

如果您在上傳的過程中出現了亂碼，無非是程式編碼和系統編碼不一緻造成的，于是嘗試修改uploadify.php檔案。您可以嘗試将move_uploaded_file($tempFile,$targetFile);   修改為move_uploaded_file($tempFile,iconv("UTF-8","gb2312", $targetFile));   重新整理頁面，上傳中文檔案。

下面介紹一下它的一些參數：

      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屬性後才有效，用來設定選擇檔案對話框中的提示文本。

　　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個屬性。

代碼如下：

$(document).ready(function(){ $("#uploadify").uploadify({ 'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf', 'script': 'UploadHandler.ashx', 'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png', 'folder': 'UploadFile', 'queueID': 'fileQueue', 'auto': false, 'multi': true, 'onInit':function(){alert("1");}, 'onSelect': function(e, queueId, fileObj) { alert("唯一辨別:" + queueId + "\r\n" + "檔案名：" + fileObj.name + "\r\n" + "檔案大小：" + fileObj.size + "\r\n" + "建立時間：" + fileObj.creationDate + "\r\n" + "最後修改時間：" + fileObj.modificationDate + "\r\n" + "檔案類型：" + fileObj.type ); } });});

當選擇一個檔案後彈出的消息如下圖：

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

onAllComplete：檔案隊列中所有的檔案上傳完成後觸發。該函數有event和data兩個參數，data有四個屬性，分别為：

• filesUploaded :上傳的所有檔案個數。
• errors ：出現錯誤的個數。
• allBytesLoaded ：所有上傳檔案的總大小。
• speed ：平均上傳速率 kb/s

相關函數介紹

在上面的例子中已經用了uploadifyUpload和uploadifyClearQueue兩個函數，除此之外還有幾個函數：

uploadifySettings：可以動态修改上面介紹的那些key值，如下面代碼

$('#uploadify').uploadifySettings('folder','JS');

如果上傳按鈕的事件寫成下面這樣，檔案将會上傳到uploadifySettings定義的目錄中

<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');$('#uploadify').uploadifyUpload()" target="_blank" rel="external nofollow" >上傳</a>

uploadifyCancel：該函數接受一個queueID作為參數，可以取消檔案隊列中指定queueID的檔案。

$('#uploadify').uploadifyCancel(id);

以下是可選項的參數說明：（紅色的屬性代表常用的)

1	uploader	上傳控件的主體檔案，flash控件    預設值='uploadify.swf'
2	script	相對路徑的後端腳本，它将處理您上傳的檔案。 絕對路徑字首或'/'或'http'的路徑   預設值='uploadify.php'
3	checkScript	檢查該檔案是否已經選擇駐留在伺服器上。 沒有預設值。 官方例子中'check.php'是提供核心檔案
4	scriptData	可提供URL傳遞參數。用來傳遞get參數。例如：   index.jsp?id=1&action=uploadify可以設定成： 'script': 'index.jsp', 'scriptData':{'id':1,'action':'uploadify'}, 注：要設定‘method’：‘GET’.
5	fileDataName	您的檔案在上傳伺服器腳本陣列的名稱。    預設值='Filedata'
6	method	設定為發送到後端腳本的方法。要麼'get'或post'。    預設值'post'
7	scriptAccess	?
8	folder	您想将檔案儲存到的路徑。考慮到安全問題，一般并不在用戶端設定後供伺服器得到所存的路徑。我試了下。這個參數好像以get的方式傳遞的。設定post得不到這個值。
9	queueID	檔案隊列ID。與div的id一緻。參考上一篇例子的用法。
10	queueSizeLimit	限制在一次隊列中的次數（可標明幾個檔案）。預設值= 999，而一次可傳幾個檔案有 simUploadLimit屬性決定。
11	multi	是否允許同時上傳多檔案，可設定true或false。   預設false。設定true時，選中的檔案是目前項。
12	auto	標明檔案後是否自動上傳，可設定true或false。   預設false
13	fileDesc	出現在上傳對話框中的檔案類型描述。與fileExt需同時使用
14	fileExt	支援的格式，啟用本項時需同時聲明fileDesc。 如：‘*.rar,*.doc
15	sizeLimit	控制上傳檔案的大小，機關byte
16	simUploadLimit	多檔案上傳時，同時上傳檔案數目限制。預設1   一次可傳幾個檔案。
17	buttonText	預設按鈕的名字。預設BROWER
18	buttonImg	使用圖檔按鈕，設定圖檔的路徑即可。
19	hideButton	上傳按鈕的隐藏。true 或false。預設flase
20	rollover	？
21	width	按鈕圖檔的長度。預設 110
22	height	按鈕圖檔的高度。預設 30
23	wmode	背景透明transparent 與不透明opaque設定。預設 不透明
24	cancelImg	取消按鈕。設定圖檔路徑。預設cancel.png
25	onInit	函數， 初始化時的狀态。 onInit: function() {  $("#id").html("上傳前");},
26	onComplete	函數：可傳遞五個參數 event: 事件對象 queueID: 完成檔案的唯一辨別符。 fileObj:     • name – 檔案名   • filepath –上傳路徑   • size – 檔案大小   • creationDate – 檔案建立時間   • modificationDate –檔案最近修改時間   • type –檔案的擴充名 response: 伺服器回調的資料 data:     • fileCount – The total number of files left in the queue   • speed – 平均上傳速度 KB/s 如： onComplete: function(event, queueID, fileObj) {   alert("檔案:" +fileObj.name + "上傳失敗");  }
27	onSelectOnce	函數：可傳遞二個參數 event: The event object. data: An object containing details about the select operation.   • fileCount – The total number of files in the queue   • filesSelected – The number of files selected in the select operation   • filesReplaced – The number of files that were replaced in the queue   • allBytesTotal – The total number of bytes for all files in the queue
28	onCancel	函數：可傳遞四個參數 event: The event object. queueID: The unique identifier of the file that was cancelled. fileObj: An object containing details about the file that was selected.    • name – The name of the file    • size – The size in bytes of the file    • creationDate – The date the file was created    • modificationDate – The last date the file was modified    • type – The file extension beginning with a '.' data: Details about the file queue.    • fileCount – The total number of files left in the queue    • allBytesTotal – The total number of bytes left for all files in the queue
29	onClearQueue	函數：可傳遞一個參數 event: The event object.
30	onQueueFull	函數：可傳遞二個參數 • event - The event object. • queueSizeLimit - The maximum size of the queue.
31	onError	函數：可傳遞四個參數 event: The event object. queueID: The unique identifier of the file that was errored. fileObj: An object containing details about the file that was selected.   • name – The name of the file   • size – The size in bytes of the file   • creationDate – The date the file was created   • modificationDate – The last date the file was modified   • type – The file extension beginning with a '.' errorObj: An object containing details about the error returned.   • type – Either 'HTTP', 'IO', or 'Security'   • info – An error message describing the type of error returned
32	onOpen	函數：可傳遞三個參數 event: The event object. queueID: The unique identifier of the file that was opened. fileObj: An object containing details about the file that was selected.   • name – The name of the file   • size – The size in bytes of the file   • creationDate – The date the file was created   • modificationDate – The last date the file was modified   • type – The file extension beginning with a '.'
33	onProgress	函數：可傳遞四個參數 event: The event object. queueID: The unique identifier of the file that was updated. fileObj: An object containing details about the file that was selected.   • name – The name of the file   • size – The size in bytes of the file   • creationDate – The date the file was created   • modificationDate – The last date the file was modified   • type – The file extension beginning with a '.' data: An object containing details about the upload and queue.   • percentage – The current percentage completed for the upload   • bytesLoaded – The current amount of bytes uploaded   • allBytesLoaded – The current amount of bytes loaded for all files in the queue   • speed – The current upload speed in KB/s
34	onSelect	event: The event object. queueID: The unique identifier of the file that was selected. fileObj: An object containing details about the file that was selected.   • name – The name of the file   • size – The size in bytes of the file   • creationDate – The date the file was created   • modificationDate – The last date the file was modified   • type – The file extension beginning with a '.'
35	onAllComplete	函數：可傳遞二個參數 event: The event object. data: An object containing details about the upload process.   • filesUploaded – The total number of files uploaded   • errors – The total number of errors while uploading   • allbytesLoaded – The total number of bytes uploaded   • speed – The average speed of all uploaded files
36	onCheck	函數：可傳遞五個參數 event: The event object. checkScript: The path to the file checking script. fileQueue: A file queue object consisting of  key/value pairs with the queue ID as the key and the filename as the value. folder: The path to the upload folder. single: True if only one file is being uploaded from the queue.

分類:  Jquery