首先申明下哈，俺新手一個，也是第一次寫博。如有錯誤望指正但勿噴，謝謝!如果對您有用，請留下您的腳印！：）
- 下載Uploadify開發包,下載地址：http://www.uploadify.com/download/
2.下載下來解壓uploadify出來后會得到幾個文件，但是我們只需要幾個開發的js包，一個取消的圖片，一個swf文件，一個css樣式文件，如下圖：
3.得到這幾個文件以后，新建一個mvc的項目，將這幾個文件放到相應的目錄下面，我們就可以開始開發了。
4.當項目都布置好以后，我們先來了解一下Uploadify的所有屬性，只有清楚每一個屬性是做什么的，才能知道怎么去配置屬性，怎么使用其強大的功能：
| 名稱 | 類型 | 默認值 | 例子 | 作用 |
|---|---|---|---|---|
| auto | Boolean | true | auto: true | 如果為true，就自動上傳，當你select了文件以后不需要用戶使用upload方法就自動上傳 |
| buttonClass | string | - | buttonClass: "selectbtnClass" | 選擇按鈕的樣式 |
| swf | string | uploadify.swf | swf: "/Content/Uploadify/swf/uploadify.swf" | swf文件的地址 |
| buttonCursor | string | hand | buttonCursor: "arrow" | 鼠標懸浮在選擇按鈕上的樣式，只能有兩個值hand arrow 手樣式或者箭頭 |
| buttonText | string | SELECT FILES | buttonText: "選擇.." | 按鈕顯示的文字 |
| checkExisting | string | false | checkExisting: "@Url.Content("~/Home/Test")" | 一個后台地址，來驗證正在上傳的文件在默認文件夾中是否存在，如果存在返回1 如果0則不存在 |
| debug | Boolean | false | debug: true | 如果為true則頁面會顯示一個調試對話框 |
| fileObjName | string | Filedata | fileObjName: "file" | 用來設置后台接受這個file文件的參數名字，如果這里設置為fileData 那么后台 request.files["fileData"] |
| fileSizeLimit | string|number | SELECT FILES | fileSizeLimit: "50kB",fileSizeLimit: 50 | 限制上傳文件的大小,默認單位是KB,可以是數字也可以是string類型,可以的單位(B,KB,MB,GB)如：500,'500B'都可以。不設置則沒有任何限制 |
| fileTypeDesc | string | All Files | fileTypeDesc: "Excel文件" | 文件類型的描述 |
| fileTypeExts | string | *.* | fileTypeExts: "*.xls;*.xlsx;*.docx;*.*" | 設置選擇文件類型，如果要設置多個要用封號隔開，如果不設置則為*.*任意類型 |
| queueID | string | false | queueID:"queuediv" | 可以任意選擇一個div或者其他標簽作為你的文件列表，這里填寫標簽的ID |
| formData | json | - | formData: { 'type': _type, 'age': _age } | 限制上傳文件的大小,默認單位是KB,可以是數字也可以是string類型,可以的單位(B,KB,MB,GB)如：500,'500B'都可以。不設置則沒有任何限制 |
| itemTemplate | string | false | 設置顯示列表的html代碼, 有幾個字段 fileSize:文件的大小，fileName：文件名字,instanceID:uploadify這個控件的id，fileID：文件在queue上的id | |
| multi | Boolean | true | multi: true | 設置是否可以批量選擇。這個地方只能控制是否可以一次選擇多個文件，不是用來控制是否是單個上傳還是批量上傳的，因為用戶還是可以一個一個的選擇多個文件 |
| method | string | post | method: "get" | 上傳類型 post或者get |
| overrideEvents | string | - | overrideEvents: ["onSelectError","onDialogClose"] | 忽略jq自身的事件，只響應用戶重寫的事件 |
| uploader | string | uploadify.php | uploader: "@Url.Content("~/Home/Upload")" | 必須的一個屬性，請求的后台地址 |
| preventCaching | Boolean | false | preventCaching: true | 在url后面添加一個任意值一起傳遞到后台，防止緩存 |
| progressData | string | percentage | progressData: "speed" | 只能有兩個值percentage or speed 上傳的進度條上顯示的是百分比或者多少kb/s |
| queueSizeLimit | number | 999 | queueSizeLimit: 10 | 設置上傳文件列表數目如果設置為只允許單個上傳只需要設置為1即可，如果超過則響應onSelectError方法 |
| removeComplete | Boolean | true | removeComplete: true | 將已經上傳完的文件移除列表，Boolean值,默認值為true |
| removeTimeout | number | 3s | removeTimeout: 10 | 將一個完成的文件延遲多少秒從列表中移除 |
| requeueErrors | Boolean | false | requeueErrors: true | 如果設置為true，上傳發生錯誤時，文件將重復上傳多次以后才返回錯誤 |
| successTimeOut | number | 30 | successTimeOut: 5 | 文件上傳成功以后等待服務器響應時間，如果超過這個時間服務器還沒有響應那么將子自動顯示其上傳成功設置response為true. onUploadSuccess |
| uploadLimit | number | 999 | uploadLimit:10 | 這個貌似和queueSizeLimit重復了，測試顯示只有同時滿足這兩個才能上傳。然后超過以后觸發的方法不同 這個是onUploadError |
| width | number | 120 | width: 100 | 設置按鈕的寬度,只需要寫一個數字就好了,不能"60px"這樣寫 |
| height | number | 30 | height: 60 | 設置按鈕的高度 |
5.Uploadify封裝的一些列事件的作用和參數介紹：
| 名稱 | 參數 | 描述 |
|---|---|---|
| onCancel | file對象,包含name,size,type(.*)等屬性 | 當有文件被取消的時候觸發這個事件 |
| onClearQueue | queueItemCount(number)列表文件數量 | 使用Cancel方法清空列表的時候觸發,當觸發的時候這個事件比onCancel先執行，queueItemCount(number)列表文件數量 |
| onDestroy | - | /當destroy方法使用的時候觸發，沒有參數 |
| onDialogClose | queueData對象 | 當選擇框關閉的時候觸發事件，queueData包含fileSelected選擇文件數量,fileReplaced被替換文件數量,fileCanceled被取消的數量,fileErrored出現錯誤文件數量,fileQueued添加到列表上的數量 |
| onDialogOpen | - | 當選擇對話框被打開以后，當你點擊打開文件的時候觸發,沒有參數，觸發在close之前 |
| onDisable | - | 當用disable,true禁用控件方法使用的時候觸發，沒有參數 |
| onEnable | - | 當使用disable false啟用控件的時候觸發，沒有參數 |
| onFallback | - | 在初始化控件的時候當瀏覽器的flash版本和控件的不兼容或者沒有安裝flash都會觸發這個事件，沒有參數 |
| onInit | instance對象 | 在控件第一次被加載的時候,在初始化的最后觸發這個事件，instance是uploadify這個控件對象，可以得到這個控件的一切初始化后的信息，比如instance.settings.buttonText,instance.settings.buttonClass; |
| onQueueComplete | queueData對象 | 當列表中的所有文件都上傳完成complete的時候觸發，queueData包含屬性uploadsSuccessful上傳成功的數量,uploadsErrored上傳出錯的數量 |
| onSelect | file對象,包含name,size,type(.*)等屬性 | 當文件被選擇 而且添加到列表上以后才觸發，如果選擇而沒有添加到列表上是不會觸發的，比如選擇以后提示已經存在列表上是否覆蓋，然后點擊了取消是不會觸發的 |
| onSelectError | file, errorcode, errormsg | errorcode(數字): QUEUE_LIMIT_EXCEEDED:-100(文件數量超過列表限制),FILE_EXCEEDS_SIZE_LIMIT:-110(文件大小超過限制),ZERO_BYTE_FILE:-120(文件為空),INVALID_FILETYPE:-130(文件類型錯誤).如果不設置將jquery中的onSelectError事件給忽略掉，他會執行你的錯誤信息之后還會執行他默認的方法一次，彈出所有的錯誤。所以我們要設置overrideEvents: ["onSelectError","onDialogClose"],這個屬性，那么就重寫了這個事件，jquery就會默認不執行他自己的這個事件，而只執行你重寫的這個事件。當然如果只重寫這個事件，他最后還是會彈出一個英文提示，大致意思是這個文件不能被添加到列表中，而觸發這個事件的是onDialogClose,因為dialogClose的時候 他也會驗證一次文件是否有error，如果有就彈出來，所以這里要忽略掉onDialogClose,當然你自己如果重寫了這個事件，他會執行玩selecterror以后再執行你重寫的ondialogclose事件 |
| onSWFReady | - | 沒有參數，當swf被加載好了，而且准備好了的時候就觸發這個事件 |
| onUploadComplete | file對象,包含name,size,type(.*)等屬性 | 為每一個上傳完成的文件觸發事件，與onQueueComplete不同，queueComplete是所有文件上傳完以后 |
| onUploadError | file, errorCode, errorMsg, errorString(詳情看onSelectError參數的介紹) | 當文件上傳但是返回了一個錯誤的時候觸發,errorString很詳細的錯誤細節，當然如果你重寫這個事件 也是需要忽略掉他自身的事件的，設置overrideEvents屬性 |
| onUploadProgress | file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal | 在每個文件上傳的過程中的每時每刻都觸發,bytesUploaded當前正在上傳的文件總共上傳的字節，bytesTotal當前正在上傳的文件的總字節,totalBytesUploaded總共上傳的字節，包含已經上傳完了的和現在正在上傳的，totalbytestotal 列表中所有文件的字節數（包含已經上傳完成） |
| onUploadStart | file對象,包含name,size,type(.*)等屬性 | 文件上傳之前觸發 |
| onUploadSuccess | file, data, response | 為每個文件上傳success以后觸發，data為上傳成功以后后台返回的數據，response為當后台服務器響應以后返回true。如果服務器沒有響應，則返回false；如果返回的是false，當successtimeout這個屬性設置的事件過后，控件自動顯示其為true.這樣得到的data當然為空 |
6.Uploadify封裝的一些方法的介紹：
upload:將列表中的文件上傳到服務器。
cancel：清除列表中的文件。
destroy：銷毀這個控件。
Disable：禁用控件。
Enable：啟用控件。
settings：修改控件配置的屬性。
注意：$("#file_upload").uploadify("settings","buttonText","改變")唯一不能改變的屬性就是swf地址
7.了解玩所有的屬性，事件，方法以后就可以正式開始Uploadify的上傳之旅了。
前端View代碼：
@{ ViewBag.Title = "主頁"; } <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")"></script> <script src="@Url.Content("~/Scripts/Uploadify/jquery.uploadify.js")"></script> <link href="@Url.Content("~/Content/Uploadify/uploadify.css")" rel="stylesheet" /> <style> #queueDiv
{
background-color:#aaa;
overflow-y:scroll;
color:white;
font-size:12px;
} .selectbtnClass { background-color:red; text-align:center; border-radius:25px; } </style> <script type="text/javascript"> $(function () { var _type = "男"; var _age = 20; $("#file_upload").uploadify({ auto: true, buttonClass: "selectbtnClass", swf: "/Content/Uploadify/swf/uploadify.swf", buttonCursor: "arrow", buttonText: "選擇..", checkExisting: "@Url.Content("~/Home/Test")", debug: true, fileObjName: "fileData", fileSizeLimit: "50kB", fileTypeDesc: "Excel文件", fileTypeExts: "*.xls;*.xlsx;*.docx;*.*", formData: { 'type': _type, 'age': _age }, queueID:"queueDiv",
itemTemplate: '<div style="background-color:#aaa;color:red;width:350px;" id="${fileID}" class="uploadify-queue-item">\ <div class="cancel">\ <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\ </div>\ <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\ </div>', multi: true, method: "post", overrideEvents: ["onSelectError","onDialogClose"], uploader: "@Url.Content("~/Home/Upload")", preventCaching: true, progressData: "speed", queueSizeLimit: 10, removeComplete: true, removeTimeout: 10, requeueErrors: true, successTimeOut: 5, uploadLimit:10, width: 100, height: 60, onCancel: function (file) { alert(file.name); }, onClearQueue: function (queueItemCount) { alert("清除的文件數目" + queueItemCount+"(onClearQueue事件被觸發)"); }, onDestroy: function () { alert("uploadify is Destroyed(onDestroy事件被觸發)"); }, onDialogClose: function (queueData) { var file = queueData.files; alert("選擇文件"+queueData.filesSelected+"|被取消的文件數"+queueData.filesReplaced+"(onDialogClose事件被觸發)"); }, onDialogOpen: function () { alert("選擇框被打開了;(onDialogOpen事件觸發)"); }, onDisable: function () { alert("控件被禁用了;(onDisable事件觸發)"); }, onEnable: function () { alert("控件可以使用了(onEnable事件被觸發)"); }, onFallback: function () { alert("沒有發現Flash(onFallback事件被觸發)"); }, onInit: function (instance) { alert("buttonText:" + instance.settings.buttonText+"(onInit事件被觸發)"); }, onQueueComplete: function (queueData) { alert(queueData.uploadsSuccessful); }, onSelect: function (file) { alert("文件" + file.name + "被選擇了(onSelect事件觸發)"); }, onSelectError: function (file, errorcode, errormsg) { if (errorcode == -100) { alert("文件" + file.name + "引發了錯誤,錯誤原因:文件數量超過列表限制(onSelectError事件觸發)"); return; } else if (errorcode == -110) { alert("文件" + file.name + "引發了錯誤,錯誤原因:文件太大了(onSelectError事件觸發)"); return; } else if (errorcode == -120) { alert("文件" + file.name + "引發了錯誤,錯誤原因:文件為空(onSelectError事件觸發)"); return; } else if (errorcode == -130) { alert("文件" + file.name + "引發了錯誤,錯誤原因:文件類型錯誤(onSelectError事件觸發)"); return; } }, onSWFReady: function () { alert("Flash已經初始化完畢(onSWFReady事件被觸發)"); }, onUploadComplete: function (file) { alert("文件" + file.name + "上傳完成!(onUploadComplete事件被觸發)"); }, onUploadError: function (file, errorCode, errorMsg, errorString) { alert("文件"+file.name+"錯誤代碼："+errorCode+"原因"+errorMsg+"詳細"+errorString+"(onUploadError事件被觸發)") }, onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { alert("文件" + file.name + "總共:" + totalBytesTotal + "總共上傳:" + totalBytesUploaded + "(OnUploadProgress事件被觸發)(希望不要被坑，一般將這個信息用html顯示出來滴!這里簡單的彈出來)"); }, onUploadStart: function (file) { alert("文件" + file.name+"(onUploadStart事件觸發)"); }, onUploadSuccess: function (file, data, response) { alert("文件" + file.name + "返回數據" + data + "返回response" + response + "(onUploadSuccess事件被觸發)"); } }); }) </script> <input type="file" id="file_upload" name="file_upload" /> <div id="queueDiv"></div>
<a href="#" onclick="javascript:$('#file_upload').uploadify('upload','*')">Upload</a>|| <a href="#" onclick="javascript:$('#file_upload').uploadify('cancel','*')">Clear Queue</a> || <a href="#" onclick="javascript:$('#file_upload').uploadify('destroy')">Destroy</a> || <a href="#" onclick="javascript:$('#file_upload').uploadify('disable',true)">Disable</a>|| <a href="#" onclick="javascript:$('#file_upload').uploadify('disable',false)">Enable</a>|| <a href="#" onclick="javascript:$('#file_upload').uploadify('stop')">Stop</a>|| <a href="#" onclick='$("#file_upload").uploadify("settings","buttonText","改變")'>改變</a> <div style="color:red">$("#file_upload").uploadify("settings","buttonText","改變")唯一不能改變的屬性就是swf地址<br /></div>
后台代碼比較簡單，Controller代碼如下：
1 public void Upload() 2 { 3 HttpPostedFileBase file = Request.Files["fileData"]; 4 string path = Server.MapPath("~/Upload/"); 5 file.SaveAs(path+file.FileName); 6 7 }