在做日常項目中，經常在后台需要上傳圖片等資源文件，之前使用過幾次這個組件，感覺非常好用 ，但是每次使用的時候都是需要經過一番查閱，所以還不如記住在這里，以后使用的時候就翻翻。
他的官方網站如下：http://www.uploadify.com/
插件下載地址：http://www.uploadify.com/download
說明文檔：http://www.uploadify.com/documentation
在此之前，先說明下插件使用流程，該插件是基於jQuery的，所以我們在使用之前需要引用jquery， 那么可以想象，插件的作用就在於在前台將數據提交到后台，讓我們通過后台代碼來保存前台傳入的文件。所以對於比如說圖片的保存、加水印、等比例壓縮就不屬於此范疇了，不過我打算一起記錄下。
首先按下面的步驟來實現一個簡單的上傳功能。
1 創建Web項目，命名為JQueryUploadDemo，從官網上下載最新的版本解壓后添加到項目中。
2 在項目中添加UploadHandler.ashx文件用來處理文件的上傳。
3 在項目中添加UploadFile文件夾，用來存放上傳的文件。
根據下引用的路徑，應該能知道具體的結構圖是怎么樣的。
4 Default.aspx的html頁的代碼修改如下,該文件可以認為是一個公共的圖片上傳頁面，到時通過使用iframe嵌入到需要用到上傳的頁面中就行：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>批量上傳</title> <link rel="Stylesheet" href="css/uploadify.css" /> <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="Scripts/jquery.uploadify.min.js"></script> <script type="text/javascript" src="Scripts/swfobject.js"></script> <script type="text/javascript"> $(function () { var space = "<%=space %>"; $('#custom_file_upload').uploadify({ 'uploader': 'Scripts/uploadify.swf', 'script': 'ashx/Upload.ashx', 'scriptData': { "type":"<%=type %>"}, 'cancelImg': 'images/uploadify-cancel.png', 'folder': '/Upload', 'multi': <%=multi %>, 'auto': false, 'fileExt': '*.jpg;*jpeg;*.gif;*.png;*.mp4', 'fileDesc': '圖片文件 (.JPG, .JPEG, .GIF, .PNG)', 'queueID': 'custom-queue', 'queueSizeLimit': 10, 'simUploadLimit': 10, 'buttonText': '選擇文件', //'buttonImg': '/Scripts/uploadify-cancel.png', 'removeCompleted': true, 'onSelectOnce': function (event, data) { $('#status-message').text(data.filesSelected + ' 個文件加入上傳隊列'); }, 'onClearQueue': function (event, data) { $('#status-message').text('請選擇要上傳的文件:'); }, 'onComplete': function (event, queueId, fileObj, response, data) { //alert(response.split('|')[1]); //這里獲取上傳后的URL路徑，用來在前台顯示 window.parent.document.getElementById('<%=file_id %>').value += response.split('|')[1] + space; }, 'onAllComplete': function (event, data) { $('#status-message').text(data.filesUploaded + ' 個文件已上傳'); } }); $("#Up").click(function () { if ($("#custom-queue").html() == "") { alert("請選擇要上傳的文件"); } else { window.parent.document.getElementById('<%=file_id %>').value = ""; $('#custom_file_upload').uploadifyUpload(null, false); //一個一個傳 //$('#custom_file_upload').uploadifyUpload(null, true);//同時傳 } }); $("#Clear").click(function () { $('#custom_file_upload').uploadifyClearQueue(); }); }); </script> <style type="text/css"> body{font-size:14px; font-family:微軟雅黑;} #custom-demo .uploadifyQueueItem { background-color: #FFFFFF; border: none; border-bottom: 1px solid #E5E5E5; font: 11px Verdana, Geneva, sans-serif; height: 20px; margin-top: 0; padding: 10px; width: 350px; } #custom-demo #custom-queue { border: 1px solid #E5E5E5; margin-bottom: 10px; width: 370px; } #custom-demo object{ float:left; } .button{ float:right; width:120px; height:30px; background-color:#525252; color:#fff; border:0; font-size:14px; font-family:微軟雅黑; cursor:pointer; margin-right:10px; _margin-right:7px; } </style> </head> <body> <div id="custom-demo" class="demo"> <div class="demo-box"> <div id="status-message">請選擇要上傳的文件:</div> <div id="custom-queue"></div> <input id="custom_file_upload" type="file" name="Filedata" class="button" /> <input type="button" id="Up" name="Up" value="上傳" class="button" /> <input type="button" id="Clear" name="Clear" value="清空" class="button" /> </div> </div> </body> </html>
這上面有幾個后台傳入的參數，分別是
string file_id = "";//插入路徑ID
int type = -1;//根據type選擇相應尺寸
string multi = "";//是否選擇多個圖片
string space = "";//多個圖片時候間隔符
5 UploadHandler類的ProcessRequest方法代碼如下：
public void ProcessRequest(HttpContext context) { int type = HRSiteRequest.GetFormInt("type", 0); ImgUpUtils up = new ImgUpUtils(); context.Response.Write(up.uploadPic(context.Request.Files, "FileData", CommonUt.Config.getUploadImgConfig(type))); }
上面的ImgUpUtils就是上面提到的一個圖片等比例壓縮的處理類，up.uploadPic(string arg1,string arg2)該方法就是返回圖片存儲后的圖片路徑，
一般而言，數據庫中都是存放圖片路徑的， 在網頁中顯示的時候，通過對圖片的src的拼接，就可以得到一個網站的圖片URL。然后通過上面的default.aspx頁面中的js我們可以看到，實際上js通過異步上傳后返回的這個url，將它放到了圖片的文本框中， 最后提交數據的時候， 該路徑就被存放到了數據庫中， 具體的就是這么個思路。那么看看頁面實際運行的實際圖吧。
6 運行后效果如下圖：
7.運行完后，填充到文本框中：
最后提交整個表單的時候， 圖片的url就被存放到了數據庫中。
8 選擇了兩個文件后，點擊上傳，就可以看到UploadFile文件夾中會增加這兩個文件。
上面簡單地實現了一個上傳的功能，依靠函數uploadify實現，uploadify函數的參數為json格式，可以對json對象的key值的修改來進行自定義的設置，如multi設置為true或false來控制是否可以進行多文件上傳，下面就來介紹下這些key值的意思：
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文件
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個屬性。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值，如下面代碼
$('#uploadify').uploadifySettings('folder','JS');
如果上傳按鈕的事件寫成下面這樣，文件將會上傳到uploadifySettings定義的目錄中
<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');
$('#uploadify').uploadifyUpload()">上傳</a>
uploadifyCancel：該函數接受一個queueID作為參數，可以取消文件隊列中指定queueID的文件。
$('#uploadify').uploadifyCancel(id);