uploadfy上傳插件彙總

Uploadify是JQuery的一個上傳插件,實現的效果非常不錯,自帶上傳進度顯示。官方提供了PHP版本的實例代碼,今天給大家分享Uploadify上傳控件的中文API文檔,其中包括了Uploadify函數、參數、和回調函數的講解,希望對您有所幫助。

uploadfy上傳插件彙總 - Anikin - Anikin

 

Uploadify特點

Uploadify簡單說來,是基於Jquery的一款文件上傳插件。它的功能特色總結如下:

  1. 支持單文件或多文件上傳,可控制併發上傳的文件數
  2. 在服務器端支持各種語言與之配合使用,諸如PHP,.NET,Java……
  3. 通過參數可配置上傳文件類型及大小限制
  4. 通過參數可配置是否選擇文件後自動上傳
  5. 易於擴展,可控制每一步驟的回調函數(onSelect, onCancel……)
  6. 通過接口參數和CSS控制外觀

何使用Uploadify

1、下載Uploadify插件

2、在網頁中引入插件的文件

3、編寫一些上傳相關的HTML代碼

4、使用JavaScript庫jQuery調用Uploadify插件

運行後效果如下圖

uploadfy上傳插件彙總 - Anikin - Anikin

 

選擇了兩個文件後,點擊上傳,就可以看到UploadFile文件夾中會增加這兩個文件。

上面簡單地實現了一個上傳的功能,依靠函數uploadify實現,uploadify函數的參數爲json格式,可以對json對象的key值的 修改來進行自定義的設置,如multi設置爲true或false來控制是否可以進行多文件上傳,下面就來介紹下這些key值的意思。

Uploadify參數介紹

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文件”,打開文件選擇框效果如下圖:

 uploadfy上傳插件彙總 - Anikin - Anikin

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 :選擇文件到文件隊列中後的每一個文件上的關閉按鈕圖標,如下圖:

uploadfy上傳插件彙總 - Anikin - Anikin

 

Uploadify函數介紹

上面介紹的key值的value都爲字符串或是布爾類型,比較簡單,接下來要介紹的key值的value爲一個函數,可以在選擇文件、出錯或其他一些操作的時候返回一些信息給用戶。

onInit : 做一些初始化的工作

onSelect :選擇文件時觸發,該函數有三個參數

  • event:事件對象。
  • queueID:文件的唯一標識,由6爲隨機字符組成。
  • fileObj:選擇的文件對象,有name、size、creationDate、modificationDate、type 5個屬性。

代碼如下:

當選擇一個文件後彈出的消息如下圖:

uploadfy上傳插件彙總 - Anikin - Anikin

 

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值,如下面代碼

如果上傳按鈕的事件寫成下面這樣,文件將會上傳到uploadifySettings定義的目錄中

uploadifyCancel:該函數接受一個queueID作爲參數,可以取消文件隊列中指定queueID的文件。

對JQuery這個上傳插件也基本瞭解了,希望對大家有所幫助,不對之處還望大家指正

赤水不忘挖井人:http://www.uedsc.com/uploadify-api.html

Uploadify跨域原理

      上面通過添加了crossdomain.xml之後就實現了跨域上傳文件,關鍵點在於Flash的安全沙箱策略;Flash安全策略簡單講:同一個域的屬於同一個沙箱,同一個沙箱的可以互相訪問.如果要訪問另外一個沙箱的內容就要在另外一個沙箱定義信任,這種信任策略就定義在crossdomain.xml中。在我們的實驗中就是在站點B的策略文件crossdomain.xml中定義了對站點A的信任,只不過我偷懶讓站點B信任所有外部域名的訪問。

     對於crossdomain.xml還有兩點細節:1.這個文件的要放在站點的根目錄下而且文件名固定 2.跨域訪問端口在1024以下必須要通過策略文件來定義信任關係。換句話說端口大於等於1024隱式開放訪問權限。策略文件的詳細說明請點擊這裏查看


 總結:Uploadify本質上是一個基於Flash的jQuery上傳插件.跨域上傳的情況牽扯到兩個安全模型,一個使瀏覽器的同源策略,一個使是Flash的安全沙箱策略;我們組合使用jQuery的Jsonp和策略文件實現了跨域上傳.


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章