大概一年前，我還在用Asp.NET開發一些行業管理系統的時候，就曾經使用這個元件作為檔案的上傳操作，在隨筆《Web開發中的檔案上傳元件uploadify的使用》中可以看到，Asp.NET中如何使用這個元件進行檔案上傳的，當時上傳檔案的處理主要也是使用ashx一般處理程式來進行處理的。本文主要介紹我的Web開發框架中，在MVC4的環境中如何整合這個非常棒的檔案上傳元件的。

1、上傳元件uploadify的說明及指令碼引用

Uploadify 是 JQuery 一個著名的上傳外掛，利用 Flash 技術，Uploadify 越過瀏覽器的限制，控制了整個上傳的處理過程，實現了客戶端無重新整理的檔案上傳，這樣就實現了在客戶端的上傳進度控制，所以，你首先要確定瀏覽器中已經安裝了 Adobe 的 Flash 外掛。
Uploadify 當前有兩個版本，基於 Flash 是免費的，還有基於 HTML5 的收費版，我們使用免費版，當前版本為v3.2.1。

這個元件需要Jquery庫的支援，一般情況下，需要新增Jquery的js庫，如下所示

<script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>

不過由於我的Web開發框架是基於EasyUI的，一般在網頁的開始就會引用相關的類庫，已經包含了Jquery的類庫了，如下所示。

    @*新增Jquery，EasyUI和easyUI的語言包的JS檔案*@
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"
 
></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>

所以我們只需要新增Javascript類庫（jquery.uploadify.js），另外加上他的樣式檔案（uploadify.css）即可：

    @*新增對uploadify控制元件的支援*@
    @*<script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>*@
    <script type="text/javascript" src="~/Content/JQueryTools/uploadify/jquery.uploadify.js"></script>
    <link href="~/Content/JQueryTools/uploadify/uploadify.css" rel="stylesheet" type="text/css" />

2、上傳元件uploadify在Web介面的使用

首先我們需要在HTML程式碼中放置兩個控制元件，一個是用來上傳的控制元件，一個是用來顯示已上傳列表的控制元件，還有就是新增上傳和取消上傳的按鈕操作，如下所示。

 <tr>
                        <th>
                            <label for="Attachment_GUID">附件上傳：</label>
                        </th>
                        <td>                            
                            <div>
                                <input class="easyui-validatebox" type="hidden" id="Attachment_GUID" name="Attachment_GUID" />
                                <input id="file_upload" name="file_upload" type="file" multiple="multiple">
                                <a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpload" data-options="plain:true,iconCls:'icon-save'"
                                    onclick="javascript: $('#file_upload').uploadify('upload', '*')">上傳</a>
                                <a href="javascript:void(0)" class="easyui-linkbutton" id="btnCancelUpload" data-options="plain:true,iconCls:'icon-cancel'"
                                    onclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消</a>

                                <div id="fileQueue" class="fileQueue"></div>
                                <div id="div_files"></div>
                                <br />
                            </div>
                        </td>
                    </tr>

介面效果初始化如下所示：

當然，下一步我們需要新增相應的檔案上傳初始化的操作指令碼程式碼，如下所示。

    <script type="text/javascript">
        $(function () {
            //新增介面的附件管理
            $('#file_upload').uploadify({
                'swf': '/Content/JQueryTools/uploadify/uploadify.swf',  //FLash檔案路徑
                'buttonText': '瀏  覽',                                 //按鈕文字
                'uploader': '/FileUpload/Upload',                       //處理檔案上傳Action
                'queueID': 'fileQueue',                        //佇列的ID
                'queueSizeLimit': 10,                          //佇列最多可上傳檔案數量，預設為999
                'auto': false,                                 //選擇檔案後是否自動上傳，預設為true
                'multi': true,                                 //是否為多選，預設為true
                'removeCompleted': true,                       //是否完成後移除序列，預設為true
                'fileSizeLimit': '10MB',                       //單個檔案大小，0為無限制，可接受KB,MB,GB等單位的字串值
                'fileTypeDesc': 'Image Files',                 //檔案描述
                'fileTypeExts': '*.gif; *.jpg; *.png; *.bmp;*.tif;*.doc;*.xls;*.zip',  //上傳的檔案字尾過濾器
                'onQueueComplete': function (event, data) {                 //所有佇列完成後事件
                    ShowUpFiles($("#Attachment_GUID").val(), "div_files");  //完成後更新已上傳的檔案列表
                    $.messager.alert("提示", "上傳完畢！");                                     //提示完成           
                },
                'onUploadStart' : function(file) {
                    $("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法規', 'guid': $("#Attachment_GUID").val() }); //動態傳引數
                },
                'onUploadError': function (event, queueId, fileObj, errorObj) {
                    //alert(errorObj.type + "：" + errorObj.info);
                }
            });

    </script>

在上面的指令碼中，均有註釋，一看就明白相關的屬性了，不明白的也可以到官方網站去查找了解。值得注意的就是

'uploader': '/FileUpload/Upload'

這行就是提交檔案給MVC的Action進行處理，我們在控制器FileUpload的 Upload處理即可。

另外，在附件上傳完畢後，我們需要對所在的介面進行更新，以便顯示已上傳的列表，那麼我們需要增加下面的函式處理即可。

'onQueueComplete': function (event, data) {   

最後說明非常值得注意的地方，就是檔案上傳的時候，我們需要動態獲取介面上的一些元素的值，作為引數傳遞，那麼我們就需要在onUploadStart函式中進行如下處理。

$("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法規', 'guid': $("#Attachment_GUID").val() }); //動態傳引數

3、上傳元件uploadify的C#後臺處理程式碼

在上面的傳遞引數中，我使用了中文數值，一般情況下，這樣會在後臺拿到中文亂碼，所以我們需要在控制器的Action的函式裡面設定它的內容格式，如下所示。

ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8";

控制器FileUpload的後臺處理Action程式碼完整如下所示：

    public class FileUploadController : BaseController
    {
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Upload(HttpPostedFileBase fileData, string guid, string folder)
        {
            if (fileData != null)
            {
                try
                {
                    ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
                    ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
                    ControllerContext.HttpContext.Response.Charset = "UTF-8";

                    // 檔案上傳後的儲存路徑
                    string filePath = Server.MapPath("~/UploadFiles/");
                    DirectoryUtil.AssertDirExist(filePath);

                    string fileName = Path.GetFileName(fileData.FileName);      //原始檔名稱
                    string fileExtension = Path.GetExtension(fileName);         //副檔名
                    string saveName = Guid.NewGuid().ToString() + fileExtension; //儲存檔名稱

                    FileUploadInfo info = new FileUploadInfo();
                    info.FileData = ReadFileBytes(fileData);
                    if (info.FileData != null)
                    {
                        info.FileSize = info.FileData.Length;
                    }
                    info.Category = folder;
                    info.FileName = fileName;
                    info.FileExtend = fileExtension;
                    info.AttachmentGUID = guid;
                    info.AddTime = DateTime.Now;
                    info.Editor = CurrentUser.Name;//登入人
                    //info.Owner_ID = OwerId;//所屬主表記錄ID

                    CommonResult result = BLLFactory<FileUpload>.Instance.Upload(info);
                    if (!result.Success)
                    {
                        LogTextHelper.Error("上傳檔案失敗:" + result.ErrorMessage);
                    }
                    return Content(result.Success.ToString());
                }
                catch (Exception ex)
                {
                    LogTextHelper.Error(ex);
                    return Content("false");
                }
            }
            else
            {
                return Content("false");
            }
        }

        private byte[] ReadFileBytes(HttpPostedFileBase fileData)
        {
            byte[] data;
            using (Stream inputStream = fileData.InputStream)
            {
                MemoryStream memoryStream = inputStream as MemoryStream;
                if (memoryStream == null)
                {
                    memoryStream = new MemoryStream();
                    inputStream.CopyTo(memoryStream);
                }
                data = memoryStream.ToArray();
            }
            return data;
        }

4、上傳元件uploadify在Web開發框架中的介面展示

具體上傳元件在的Web開發框架中介面效果如下所示，下圖是總體的列表中附件的展示。

附件編輯和上傳介面如下所示。

附件資訊檢視效果如下所示：

本系列文章列表如下：

基於MVC4+EasyUI的Web開發框架的系列文章：