快捷導(dǎo)航

JQuery上傳插件Uploadify使用詳解及錯誤處理

更新時間：2010年04月27日 17:22:52 作者：

關(guān)于JQuery上傳插件Uploadify使用詳解網(wǎng)上一大把，基本上內(nèi)容都一樣。我根據(jù)網(wǎng)上的步驟配置完成后，會報一些錯誤，而我根據(jù)這些錯誤去網(wǎng)上找解決方案，卻沒有相關(guān)資料，所以為了不讓更多的朋友走彎路，我把我遇到的一些問題進行匯總，也方便我自己以后查閱。

　什么是Uploadify

　　Uploadify是JQuery的一個上傳插件，支持多文件上傳，實現(xiàn)的效果非常不錯，帶進度顯示。

　　官網(wǎng)提供的是PHP的DEMO,在這里我詳細介紹在Asp.net下的使用.

　　下載

　　　　官方下載

　　　　官方文檔

　　　　官方演示

腳本之家提供的Uploadify下載地址
　　如何使用

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

　　2 在項目中添加UploadHandler.ashx文件用來處理文件的上傳。

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

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

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

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Uploadify</title> 
<link href="JS/jquery.uploadify-v2.1.0/example/css/default.css" 
rel="stylesheet" type="text/css" /> 
<link href="JS/jquery.uploadify-v2.1.0/uploadify.css" 
rel="stylesheet" type="text/css" /> 

<script type="text/javascript" 
src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script> 

<script type="text/javascript" 
src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script> 

<script type="text/javascript" 
src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script> 

<script type="text/javascript"> 
$(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 
}); 
}); 
</script> 

</head> 
<body> 
<div id="fileQueue"></div> 
<input type="file" name="uploadify" id="uploadify" /> 
<p> 
<a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a>| 
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a> 
</p> 
</body> 
</html> 

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

復(fù)制代碼代碼如下:

 
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); 
//下面這句代碼缺少的話，上傳成功后上傳隊列的顯示不會自動消失 
context.Response.Write("1"); 
} 
else 
{ 
context.Response.Write("0"); 
} 
} 

　　注意:這里一定要注意，一定要引用using System.IO;命名空間，我出錯的原因也是在這里，網(wǎng)上的教程基本上都沒提到這一點，所以有很多網(wǎng)友會遇到IOError的錯誤。

6 運行后效果如下圖：

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

　　上面的代碼就簡單實現(xiàn)了上傳的功能，依靠函數(shù)uploadify實現(xiàn)，uploadify函數(shù)的參數(shù)為json格式，可以對json對象的key值的修改來進行自定義的設(shè)置，如multi設(shè)置為true或false來控制是否可以進行多文件上傳，下面就來介紹下這些key值的意思：

uploader ： uploadify.swf 文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊后淡出打開文件對話框，默認(rèn)值：uploadify.swf。
script ：后臺處理程序的相對路徑。默認(rèn)值：uploadify.php
checkScript ：用來判斷上傳選擇的文件在服務(wù)器是否存在的后臺處理程序的相對路徑
fileDataName ：設(shè)置一個名字，在服務(wù)器處理程序中根據(jù)該名字來取上傳文件的數(shù)據(jù)。默認(rèn)為Filedata
method ：提交方式Post 或Get 默認(rèn)為Post
scriptAccess ：flash腳本文件的訪問模式，如果在本地測試設(shè)置為always，默認(rèn)值：sameDomain
folder ： 上傳文件存放的目錄。
queueID ： 文件隊列的ID，該ID與存放文件隊列的div的ID一致。
queueSizeLimit ： 當(dāng)允許多文件生成時，設(shè)置選擇文件的個數(shù)，默認(rèn)值：999 。
multi ： 設(shè)置為true時可以上傳多個文件。
auto ： 設(shè)置為true當(dāng)選擇文件后就直接上傳了，為false需要點擊上傳按鈕才上傳。
fileDesc ： 這個屬性值必須設(shè)置fileExt屬性后才有效，用來設(shè)置選擇文件對話框中的提示文本，如設(shè)置fileDesc為“請選擇rar doc pdf文件”，打開文件選擇框效果如下圖：

fileExt ： 設(shè)置可以選擇的文件的類型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上傳文件的大小限制。
simUploadLimit ： 允許同時上傳的個數(shù) 默認(rèn)值：1 。
buttonText ： 瀏覽按鈕的文本，默認(rèn)值：BROWSE 。
buttonImg ： 瀏覽按鈕的圖片的路徑。
hideButton ： 設(shè)置為true則隱藏瀏覽按鈕的圖片。
rollover ： 值為true和false，設(shè)置為true時當(dāng)鼠標(biāo)移到瀏覽按鈕上時有反轉(zhuǎn)效果。
width ： 設(shè)置瀏覽按鈕的寬度，默認(rèn)值：110。
height ： 設(shè)置瀏覽按鈕的高度，默認(rèn)值：30。
wmode ： 設(shè)置該項為transparent 可以使瀏覽按鈕的flash背景文件透明，并且flash文件會被置為頁面的最高層。默認(rèn)值：opaque 。
cancelImg ：選擇文件到文件隊列中后的每一個文件上的關(guān)閉按鈕圖標(biāo)，如下圖：

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

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

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

event:事件對象。
queueID：文件的唯一標(biāo)識，由6為隨機字符組成。
fileObj：選擇的文件對象，有name、size、creationDate、modificationDate、type 5個屬性。

代碼如下：

復(fù)制代碼代碼如下:

 
$(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)識:" + queueId + "\r\n" + 
"文件名：" + fileObj.name + "\r\n" + 
"文件大?。? + fileObj.size + "\r\n" + 
"創(chuàng)建時間：" + fileObj.creationDate + "\r\n" + 
"最后修改時間：" + fileObj.modificationDate + "\r\n" + 
"文件類型：" + fileObj.type 
); 

} 
}); 
}); 

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

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

fileCount：選擇文件的總數(shù)。
filesSelected：同時選擇文件的個數(shù)，如果一次選擇了3個文件該屬性值為3。
filesReplaced：如果文件隊列中已經(jīng)存在A和B兩個文件，再次選擇文件時又選擇了A和B，該屬性值為2。
allBytesTotal：所有選擇的文件的總大小。

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

fileCount：取消一個文件后，文件隊列中剩余文件的個數(shù)。
allBytesTotal：取消一個文件后，文件隊列中剩余文件的大小。

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

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

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

type：錯誤的類型，有三種‘HTTP', ‘IO', or ‘Security'
info：錯誤的描述

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

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

percentage：當(dāng)前完成的百分比
bytesLoaded：當(dāng)前上傳的大小
allBytesLoaded：文件隊列中已經(jīng)上傳完的大小
speed：上傳速率 kb/s

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

fileCount：剩余沒有上傳完成的文件的個數(shù)。
speed：文件上傳的平均速率 kb/s
注：fileObj對象和上面講到的有些不太一樣，onComplete 的fileObj對象有個filePath屬性可以取出上傳文件的路徑。

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

filesUploaded :上傳的所有文件個數(shù)。
errors ：出現(xiàn)錯誤的個數(shù)。
allBytesLoaded ：所有上傳文件的總大小。
speed ：平均上傳速率 kb/s

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

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

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

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

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

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

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

　　好了，所有的配置都完成了。下面說說我遇到的一些問題。 span style="font-size: 18pt;">　可能遇到的問題　　1.我剛開始配置完成后，并不能正常工作，flash（uploadify.swf' ）沒有加載。后來我查看jquery.uploadify.v2.1.0.js發(fā)現(xiàn)該插件是利用swfobject.js動態(tài)創(chuàng)建的FLASH，后來我單獨做試驗還是不能顯示flash，無耐之下重啟電腦后就可以了。暈倒～～～　　2.FLASH終于加載進來了，但上傳又失敗了。報IOError,如圖：　　