你使用過 GMail 中附件上傳嗎？帶有上傳進度，可以取消正在進行的上傳，使用 Uploadify 插件，你也可以做到。
Uploadify 是 JQuery 一個著名的上傳插件，利用 Flash 技術，Uploadify 越過瀏覽器的限制，控制了整個上傳的處理過程，實現了客戶端無刷新的文件上傳，這樣就實現了在客戶端的上傳進度控制，所以，你首先要確定瀏覽器中已經安裝了 Adobe 的 Flash 插件。
一. 下載軟件包
目前，最新的版本是 3.2, 可以在官方網站下載到。地址：http://www.uploadify.com/download/
有兩個版本，基於 Flash 是免費的，還有基於 HTML5 的收費版，我們使用免費版。
有的時候訪問會有問題，如果你訪問不了這個網站，點擊這裏可以直接下載。
在上傳過程中，Uploadify 使用標準的 HTTP 協議進行文件上傳，這樣，在服務器端，我們就可以使用標準的文件上傳技術來獲取瀏覽器上傳的文件。
下面我們在 MVC4 的應用程序中使用 Uploadify 實現無刷新的上傳。
二. 使用步驟
1. 創建標準的 MVC4 應用程序.
2. 選擇空的網站模版。
3. 創建之後的項目，如圖所示。
4. 將下載的壓縮包解壓之後，粘貼到項目中。需要注意的是，壓縮包中並沒有直接包含 jQuery 的腳本庫，這裏我們自己添加了 1.9.1 的 jQuery 腳本庫。如圖所示。
5. 創建 Home 控制器，添加 Index Action 以及視圖
6. 引入 uploadify 的樣式表，樣式表提供了按鈕的外觀，默認它還會提供一個上傳進度，並且支持取消的，如果沒有樣式表，效果就出不來。
<link href="~/uploadify/uploadify.css" rel="stylesheet" />
需要注意的是，樣式表中取消按鈕的圖片默認使用網站根目錄下 img 文件夾中的圖片，其實，這個圖片與樣式表在同一個文件夾中，注意修改一下文件的第 74 行。
.uploadify-queue-item .cancel a { background: url('./uploadify-cancel.png') 0 0 no-repeat; float: right; height: 16px; text-indent: -9999px; width: 16px; }
7. 在 Index.cshtml 中引入使用的腳本庫。
<script src="~/uploadify/jquery-1.9.1.min.js"></script> <script src="~/uploadify/jquery.uploadify.min.js"></script>
8. 在 Index.cshtml 視圖中，加入一個 id 爲 uploadify 的元素，這個元素用來顯示爲一個按鈕，用戶點擊之後用來彈出選擇上傳文件的選擇窗口。這啓用上傳之後，這個元素將會被隱藏起來。
<span id="uploadify"></span>
8. 插入啓用上傳的腳本。
$('#uploadify').uploadify({
uploader: '/home/upload', // 服務器端處理地址
swf: '/uploadify/uploadify.swf', // 上傳使用的 Flash
width: 60, // 按鈕的寬度
height: 23, // 按鈕的高度
buttonText: "上傳", // 按鈕上的文字
buttonCursor: 'hand', // 按鈕的鼠標圖標
fileObjName: 'Filedata', // 上傳參數名稱
// 兩個配套使用
fileTypeExts: "*.jpg;*.png", // 擴展名
fileTypeDesc: "請選擇 jpg png 文件", // 文件說明
auto: true, // 選擇之後，自動開始上傳
multi: true, // 是否支持同時上傳多個文件
queueSizeLimit: 5 // 允許多文件上傳的時候，同時上傳文件的個數
});
8. 整個頁面的內容如下所示。
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>uploadify 3.2 文件上傳的基本實現</title> <link href="~/uploadify/uploadify.css" rel="stylesheet" /> </head> <body> <h1>uploadify 3.2 文件上傳的基本實現</h1> <p> 使用了 12 個參數 <ul> <li>uploader: 服務器端接收上傳文件的地址</li> <li>swf：用來實現客戶端支持的 Flash</li> <li>width：按鈕的寬度</li> <li>height：按鈕的高度</li> <li>buttonText: 上傳按鈕的文字</li> <li>buttonCursor：按鈕的鼠標圖標</li> <li>fileObjName：上傳文件的請求參數名稱</li> <li>fileTypeExts：上傳文件過濾使用的擴展名</li> <li>fileTypeDesc：上傳文件的類型描述</li> <li>auto：選擇之後，是否自動開始上傳</li> <li>multi：是否允許上傳多個文件</li> <li>queueSizeLimit：同時選擇多個文件的限額</li> </ul> </p> <span id="uploadify"></span> <script src="~/uploadify/jquery-1.9.1.min.js"></script> <script src="~/uploadify/jquery.uploadify.min.js"></script> <script type="text/javascript"> $(function () { $('#uploadify').uploadify({ uploader: '/home/upload', // 服務器端處理地址 swf: '/uploadify/uploadify.swf', // 上傳使用的 Flash width: 60, // 按鈕的寬度 height: 23, // 按鈕的高度 buttonText: "上傳", // 按鈕上的文字 buttonCursor: 'hand', // 按鈕的鼠標圖標 fileObjName: 'Filedata', // 上傳參數名稱 // 兩個配套使用 fileTypeExts: "*.jpg;*.png", // 擴展名 fileTypeDesc: "請選擇 jpg png 文件", // 文件說明 auto: true, // 選擇之後，自動開始上傳 multi: true, // 是否支持同時上傳多個文件 queueSizeLimit: 5 // 允許多文件上傳的時候，同時上傳文件的個數 }); }); </script> </body> </html>
9. 打開頁面之後，使用 FireBug 可以看到按鈕已經被替換了。
10. 創建用於上傳的 Upload Action 方法，這個方法不需要對應的視圖。服務器端接收上傳文件使用一個名爲 Upload 的 Action 完成，上傳參數的名稱由fileObjName 設置，上傳是否正確取決於返回的 Http 狀態碼，如果返回 2XX 表示正確，否則錯誤。默認的返回狀態碼就是 200.
在網站的根目錄下創建一個名爲 photos 的文件夾，用來保存上傳的文件。
public ActionResult Upload(HttpPostedFileBase Filedata) { // 如果沒有上傳文件 if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == 0) { return this.HttpNotFound(); } // 保存到 ~/photos 文件夾中，名稱不變 string filename = System.IO.Path.GetFileName(Filedata.FileName); string virtualPath = string.Format("~/photos/{0}", filename); // 文件系統不能使用虛擬路徑 string path = this.Server.MapPath(virtualPath); Filedata.SaveAs(path); return this.Json(new { }); }
11. 現在，你就已經可以上傳一張圖片了。而且還帶有一個漂亮的進度條。
