Uploadify是JQuery的一個(gè)上傳插件，實(shí)現(xiàn)的效果非常不錯(cuò)，帶進(jìn)度顯示。不過官方提供的實(shí)例時(shí)php版本的，本文將詳細(xì)介紹Uploadify在Aspnet中的使用，您也可以點(diǎn)擊下面的鏈接進(jìn)行演示或下載。

首先按下面的步驟來實(shí)現(xiàn)一個(gè)簡單的上傳功能。

1 創(chuàng)建Web項(xiàng)目，命名為JQueryUploadDemo，從官網(wǎng)上下載最新的版本解壓后添加到項(xiàng)目中。

2 在項(xiàng)目中添加JQueryUploadHandler.ashx文件用來處理文件的上傳。

3 在項(xiàng)目中添加UploadFile文件夾，用來存放上傳的文件。

進(jìn)行完上面三步后項(xiàng)目的基本結(jié)構(gòu)如下圖:

4 Default.aspx的html頁的代碼修改如下：

Uploadify

上傳| 取消上傳

5? UploadHandler類的ProcessRequest方法代碼如下：

public void ProcessRequest(HttpContext context){ context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"; if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(uploadPath + file.FileName); //下面這句代碼缺少的話，上傳成功后上傳隊(duì)列的顯示不會(huì)自動(dòng)消失 context.Response.Write("1"); } else { context.Response.Write("0"); } }

6 運(yùn)行后效果如下圖：

Uploadify有一個(gè)參數(shù)是 buttonText 這個(gè)無論你怎么改都不支持中文，因?yàn)椴寮趈s里用了一個(gè)轉(zhuǎn)碼方法把這個(gè)參數(shù)的值轉(zhuǎn)過碼了，解碼的地方在那個(gè)swf文件里，看不到代碼，所以這條路不行。

另一個(gè)參數(shù)，網(wǎng)上很少提到，是 buttonImg( 按鈕圖片)，這時(shí)你完全可以用一個(gè)圖片來替換掉插件自帶的那個(gè)黑色的flash瀏覽按鈕，只要你自己的圖片上是中文，這不就解決了中文按鈕問題么？如果只加這一個(gè)，你會(huì)發(fā)現(xiàn)你的按鈕圖片下面有一片白色區(qū)域，其實(shí)就是那個(gè)flash留下的，白色區(qū)域表示鼠標(biāo)可用范圍，這個(gè)范圍可以用width,height來調(diào)整。還有一個(gè)參數(shù) wmode 它的默認(rèn)值是opaque，把它改成transparent就行了，也就是把那片白色區(qū)域透明化

如果您在上傳的過程中出現(xiàn)了亂碼，無非是程序編碼和系統(tǒng)編碼不一致造成的，于是嘗試修改uploadify.php文件。您可以嘗試將move_uploaded_file($tempFile,$targetFile);?? 修改為move_uploaded_file($tempFile,iconv("UTF-8","gb2312", $targetFile));?? 刷新頁面，上傳中文文件。

下面介紹一下它的一些參數(shù)：

uploader ： uploadify.swf 文件的相對(duì)路徑，該swf文件是一個(gè)帶有文字BROWSE的按鈕，點(diǎn)擊后彈出打開文件對(duì)話框，默認(rèn)值：uploadify.swf。

script ： 后臺(tái)處理程序的相對(duì)路徑 。默認(rèn)值：uploadify.php

checkScript ：用來判斷上傳選擇的文件在服務(wù)器是否存在的后臺(tái)處理程序的相對(duì)路徑

fileDataName ：設(shè)置一個(gè)名字，在服務(wù)器處理程序中根據(jù)該名字來取上傳文件的數(shù)據(jù)。默認(rèn)為Filedata

method ： 提交方式Post 或Get 默認(rèn)為Post

scriptAccess ：flash腳本文件的訪問模式，如果在本地測試設(shè)置為always，默認(rèn)值：sameDomain

folder ： 上傳文件存放的目錄 。

queueID ： 文件隊(duì)列的ID，該ID與存放文件隊(duì)列的div的ID一致。

queueSizeLimit ： 當(dāng)允許多文件生成時(shí)，設(shè)置選擇文件的個(gè)數(shù)，默認(rèn)值：999 。

multi ： 設(shè)置為true時(shí)可以上傳多個(gè)文件。

auto ： 設(shè)置為true當(dāng)選擇文件后就直接上傳了，為false需要點(diǎn)擊上傳按鈕才上傳 。

fileDesc ： 這個(gè)屬性值必須設(shè)置fileExt屬性后才有效，用來設(shè)置選擇文件對(duì)話框中的提示文本。

fileExt ： 設(shè)置可以選擇的文件的類型，格式如：'*.doc;*.pdf;*.rar' 。

sizeLimit ： 上傳文件的大小限制 。

simUploadLimit ： 允許同時(shí)上傳的個(gè)數(shù) 默認(rèn)值：1 。

buttonText ： 瀏覽按鈕的文本，默認(rèn)值：BROWSE 。

buttonImg ： 瀏覽按鈕的圖片的路徑 。

hideButton ： 設(shè)置為true則隱藏瀏覽按鈕的圖片 。

rollover ： 值為true和false，設(shè)置為true時(shí)當(dāng)鼠標(biāo)移到瀏覽按鈕上時(shí)有反轉(zhuǎn)效果。

width ： 設(shè)置瀏覽按鈕的寬度 ，默認(rèn)值：110。

height ： 設(shè)置瀏覽按鈕的高度 ，默認(rèn)值：30。

wmode ： 設(shè)置該項(xiàng)為transparent 可以使瀏覽按鈕的flash背景文件透明，并且flash文件會(huì)被置為頁面的最高層。 默認(rèn)值：opaque 。

cancelImg ：選擇文件到文件隊(duì)列中后的每一個(gè)文件上的關(guān)閉按鈕圖標(biāo)

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

onInit : 做一些初始化的工作。

onSelect ：選擇文件時(shí)觸發(fā)，該函數(shù)有三個(gè)參數(shù)

event:事件對(duì)象。

queueID：文件的唯一標(biāo)識(shí)，由6為隨機(jī)字符組成。

fileObj：選擇的文件對(duì)象，有name、size、creationDate、modificationDate、type 5個(gè)屬性。

代碼如下：

$(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("唯一標(biāo)識(shí):" + queueId + "\r\n" + "文件名：" + fileObj.name + "\r\n" + "文件大小：" + fileObj.size + "\r\n" + "創(chuàng)建時(shí)間：" + fileObj.creationDate + "\r\n" + "最后修改時(shí)間：" + fileObj.modificationDate + "\r\n" + "文件類型：" + fileObj.type ); } });});

當(dāng)選擇一個(gè)文件后彈出的消息如下圖：

onSelectOnce ：在單文件或多文件上傳時(shí)，選擇文件時(shí)觸發(fā)。該函數(shù)有兩個(gè)參數(shù)event，data，data對(duì)象有以下幾個(gè)屬性：

fileCount：選擇文件的總數(shù)。

filesSelected：同時(shí)選擇文件的個(gè)數(shù)，如果一次選擇了3個(gè)文件該屬性值為3。

filesReplaced：如果文件隊(duì)列中已經(jīng)存在A和B兩個(gè)文件，再次選擇文件時(shí)又選擇了A和B，該屬性值為2。

allBytesTotal：所有選擇的文件的總大小。

onCancel : 當(dāng)點(diǎn)擊文件隊(duì)列中文件的關(guān)閉按鈕或點(diǎn)擊取消上傳時(shí)觸發(fā)。該函數(shù)有event、queueId、fileObj、data四個(gè)參數(shù)，前三個(gè)參數(shù)同onSelect 中的三個(gè)參數(shù)，data對(duì)象有兩個(gè)屬性fileCount和allBytesTotal。

fileCount：取消一個(gè)文件后，文件隊(duì)列中剩余文件的個(gè)數(shù)。

allBytesTotal：取消一個(gè)文件后，文件隊(duì)列中剩余文件的大小。

onClearQueue ：當(dāng)調(diào)用函數(shù)fileUploadClearQueue時(shí)觸發(fā)。有event和data兩個(gè)參數(shù)，同onCancel 中的兩個(gè)對(duì)應(yīng)參數(shù)。

onQueueFull ：當(dāng)設(shè)置了queueSizeLimit并且選擇的文件個(gè)數(shù)超出了queueSizeLimit的值時(shí)觸發(fā)。該函數(shù)有兩個(gè)參數(shù)event和queueSizeLimit。

onError ：當(dāng)上傳過程中發(fā)生錯(cuò)誤時(shí)觸發(fā)。該函數(shù)有event、queueId、fileObj、errorObj四個(gè)參數(shù)，其中前三個(gè)參數(shù)同上，errorObj對(duì)象有type和info兩個(gè)屬性。

type：錯(cuò)誤的類型，有三種‘HTTP’, ‘IO’, or ‘Security’

info：錯(cuò)誤的描述

onOpen ：點(diǎn)擊上傳時(shí)觸發(fā)，如果auto設(shè)置為true則是選擇文件時(shí)觸發(fā)，如果有多個(gè)文件上傳則遍歷整個(gè)文件隊(duì)列。該函數(shù)有event、queueId、fileObj三個(gè)參數(shù)，參數(shù)的解釋同上。

onProgress ：點(diǎn)擊上傳時(shí)觸發(fā)，如果auto設(shè)置為true則是選擇文件時(shí)觸發(fā)，如果有多個(gè)文件上傳則遍歷整個(gè)文件隊(duì)列，在onOpen之后觸發(fā)。該函數(shù)有event、queueId、fileObj、data四個(gè)參數(shù)，前三個(gè)參數(shù)的解釋同上。data對(duì)象有四個(gè)屬性percentage、bytesLoaded、allBytesLoaded、speed：

percentage：當(dāng)前完成的百分比

bytesLoaded：當(dāng)前上傳的大小

allBytesLoaded：文件隊(duì)列中已經(jīng)上傳完的大小

speed：上傳速率 kb/s

onComplete：文件上傳完成后觸發(fā)。該函數(shù)有四個(gè)參數(shù)event、queueId、fileObj、response、data五個(gè)參數(shù)，前三個(gè)參數(shù)同上。response為后臺(tái)處理程序返回的值，在上面的例子中為1或0，data有兩個(gè)屬性fileCount和speed

fileCount：剩余沒有上傳完成的文件的個(gè)數(shù)。

speed：文件上傳的平均速率 kb/s

onAllComplete：文件隊(duì)列中所有的文件上傳完成后觸發(fā)。該函數(shù)有event和data兩個(gè)參數(shù)，data有四個(gè)屬性，分別為：

filesUploaded :上傳的所有文件個(gè)數(shù)。

errors ：出現(xiàn)錯(cuò)誤的個(gè)數(shù)。

allBytesLoaded ：所有上傳文件的總大小。

speed ：平均上傳速率 kb/s

相關(guān)函數(shù)介紹

在上面的例子中已經(jīng)用了uploadifyUpload和uploadifyClearQueue兩個(gè)函數(shù)，除此之外還有幾個(gè)函數(shù)：

uploadifySettings：可以動(dòng)態(tài)修改上面介紹的那些key值，如下面代碼

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

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

上傳

uploadifyCancel：該函數(shù)接受一個(gè)queueID作為參數(shù)，可以取消文件隊(duì)列中指定queueID的文件。

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

以下是可選項(xiàng)的參數(shù)說明：(紅色的屬性代表常用的)

1

uploader

上傳控件的主體文件，flash控件

默認(rèn)值='uploadify.swf'

2

script

相對(duì)路徑的后端腳本，它將處理您上傳的文件。

絕對(duì)路徑前綴或'/'或'http'的路徑

默認(rèn)值='uploadify.php'

3

checkScript

檢查該文件是否已經(jīng)選擇駐留在服務(wù)器上。

沒有默認(rèn)值。 官方例子中'check.php'是提供核心文件

4

scriptData

可提供URL傳遞參數(shù)。用來傳遞get參數(shù)。例如：

index.jsp?id=1&action=uploadify可以設(shè)置成：

'script': 'index.jsp',

'scriptData':{'id':1,'action':'uploadify'},

注：要設(shè)置‘method’：‘GET’.

5

fileDataName

您的文件在上傳服務(wù)器腳本陣列的名稱。

默認(rèn)值='Filedata'

6

method

設(shè)置為發(fā)送到后端腳本的方法。要么'get'或post'。

默認(rèn)值'post'

8

folder

您想將文件保存到的路徑。考慮到安全問題，一般并不在客戶端設(shè)定后供服務(wù)器得到所存的路徑。我試了下。這個(gè)參數(shù)好像以get的方式傳遞的。設(shè)定post得不到這個(gè)值。

9

queueID

文件隊(duì)列ID。與div的id一致。參考上一篇例子的用法。

10

queueSizeLimit

限制在一次隊(duì)列中的次數(shù)(可選定幾個(gè)文件)。默認(rèn)值= 999，而一次可傳幾個(gè)文件有 simUploadLimit屬性決定。

11

multi

是否允許同時(shí)上傳多文件，可設(shè)定true或false。

默認(rèn)false。設(shè)定true時(shí)，選中的文件是當(dāng)前項(xiàng)。

12

auto

選定文件后是否自動(dòng)上傳，可設(shè)定true或false。

默認(rèn)false

13

fileDesc

出現(xiàn)在上傳對(duì)話框中的文件類型描述。與fileExt需同時(shí)使用

14

fileExt

支持的格式，啟用本項(xiàng)時(shí)需同時(shí)聲明fileDesc。

如：‘*.rar,*.doc

15

sizeLimit

控制上傳文件的大小，單位byte

16

simUploadLimit

多文件上傳時(shí)，同時(shí)上傳文件數(shù)目限制。默認(rèn)1

一次可傳幾個(gè)文件。

17

buttonText

默認(rèn)按鈕的名字。默認(rèn)BROWER

18

使用圖片按鈕，設(shè)定圖片的路徑即可。

19

hideButton

上傳按鈕的隱藏。true 或false。默認(rèn)flase

20

rollover

？

21

width

按鈕圖片的長度。默認(rèn) 110

22

height

按鈕圖片的高度。默認(rèn) 30

23

wmode

背景透明transparent 與不透明opaque設(shè)定。默認(rèn) 不透明

24

cancelImg

取消按鈕。設(shè)定圖片路徑。默認(rèn)cancel.png

25

onInit

函數(shù)， 初始化時(shí)的狀態(tài)。

onInit: function() {

$("#id").html("上傳前");},

26

onComplete

event: 事件對(duì)象

queueID: 完成文件的唯一標(biāo)識(shí)符。

fileObj:

? name – 文件名

? filepath –上傳路徑

? size – 文件大小

? creationDate – 文件創(chuàng)建時(shí)間

? modificationDate –文件最近修改時(shí)間

? type –文件的擴(kuò)展名

response: 服務(wù)器回調(diào)的數(shù)據(jù)

data:

? fileCount – The total number of files left in the queue

? speed – 平均上傳速度 KB/s

如：

onComplete: function(event, queueID, fileObj) {

alert("文件:" +fileObj.name + "上傳失敗");?}

27

onSelectOnce

函數(shù)：可傳遞二個(gè)參數(shù)

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

函數(shù)：可傳遞四個(gè)參數(shù)

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

函數(shù)：可傳遞一個(gè)參數(shù)

event: The event object.

30

onQueueFull

函數(shù)：可傳遞二個(gè)參數(shù)

? 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

函數(shù)：可傳遞三個(gè)參數(shù)

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

函數(shù)：可傳遞四個(gè)參數(shù)

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

函數(shù)：可傳遞五個(gè)參數(shù)

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.

總結(jié)

以上是生活随笔為你收集整理的java uploadify 参数_Uploadify的一些参数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。