ASP.NET MVC上傳文件----uploadify的使用

     課程設計需要實現上傳文件模塊，本來ASP.NET是有內置的控件，但是ASP.NET MVC沒有，所以就有兩種方法:自定義和采用第三方插件。由於時間的關系，故采用第三方插件:uploadify。

      uploadify的使用必須下載相應的文件，下載地址:http://www.uploadify.com/download/。

      先是視圖:

<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server">
    <script src="/Scripts/swfobject.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
    <link href="/Content/uploadify.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .SuccessText
        {
            color: Red;
            font-weight: bold;
        }

        .FaileText
        {
            color: Green;
            font-weight: bold;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $('#fileInput1').uploadify({
                'uploader': '/Content/uploadify.swf',
                'script': '/Home/LoadFile',
                'folder': '/UploadFiles',
                'cancelImg': '/Content/cancel.png',
                'sizeLimit': 1024 * 1024 * 4, //4M
                'multi': true,
                'onComplete': Complete
            });

        });
        function Complete(event, queueID, fileObj, response, data) {
            if (response != "") {
                showInfo("成功上傳" + response, true);
            }
            else {
                showInfo("文件上傳出錯！", false);
            }
        }
        //顯示提示信息，SuccessText為綠色，即上傳成功；FalseText為紅色，即上傳失敗        function showInfo(msg, type) {
            var msgClass = type == true ? "SuccessText" : "FaileText";
            $("#result").removeClass();
            $("#result").addClass(msgClass);
            $("#result").html(msg);
        }
        //如果點擊‘導入文件’時選擇文件為空，則提示
        function checkLoad() {
            if ($.trim($('#fileInput1Queue').html()) == "") {
                alert('請先選擇要上傳的文件！');
                return false;
            }
            return true;
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <div>
        <p>
            <input id="fileInput1" name="fileInput1" type="file" />
        </p>
        <p style="margin-top: 5px; font-size: 14px; font-weight: bold;">
            <a href="javascript:if(checkLoad()){$('#fileInput1').uploadifySettings('scriptData',{'name':$('#test').val()});$('#fileInput1').uploadifyUpload();}">上傳</a>
        </p>
        <p style="margin-top: 5px; font-size: 14px; font-weight: bold;"><span id="result"></span></p>
    </div>
</asp:Content>

      考慮到其他人的工作是基於ASP.NET引擎的，所以我的視圖也是采用該視圖引擎。
      視圖中最重要的部分就是javascript代碼部分：

      uploader:就是uploadify.swf文件的相對路徑，所謂的swf文件就是一個帶有文字("瀏覽")的按鈕，該按鈕點開就是一個文件對話框，供用戶選擇要上傳的文件。

      script:后台處理程序的相對路徑，也就是我們用戶處理上傳文件數據的Action。

      folder:上傳文件存放的目錄。

      cancelImg:該圖片點擊可以取消上傳。

      sizeLimit:上傳文件的大小限制。

      multi:設置為true時可以同時上傳多個文件。

      onComplete:文件上傳完后的觸發事件，一共有5個參數，重點在於后面兩個：response為后台處理程序返回的值，如果為空，說明文件上傳失敗。data有兩個屬性:fileCount表示剩余沒有上傳完成的文件的個數，speed表示文件上傳的平均速率(kb/s)。我們這里的onComplete函數很簡單，就是簡單的判斷文件是否上傳成功。

     還有兩個很重要的屬性:fileExt和fileDesc。它們必須一起使用，並且值是一樣的，因為它們規定的就是選擇上傳的文件類型。fileExt設置可以選擇的文件類型，其實就是文件的擴展名。fileDesc用來設置選擇文件對話框中的提示文本，也就是我們一般在選擇文件的時候，都會有一個文件類型，而fileDesc能人為規定該文件類型是什么。這里之所以沒有用到這兩個屬性，是因為我默認選擇所有文件，但如果模塊只要求上傳圖片格式，那么我們就可以通過這兩個屬性達到文件過濾了。

      效果圖：

    

     值得注意的是，如果出現這樣的界面：

    

     說明swfobject.js沒有添加正確。

     如果是這樣：

   

     則是jquery-1.4.1.min.js或者jquery.uploadify.v2.1.0.min.js沒有添加正確。這種情況可以選擇文件，但是無法上傳，之前出現這樣的錯誤，導致我以為是我的瀏覽器無法上傳文件，以致走了很多彎路，搞了很多配置，其實就是沒有正確導入相應的js文件。

    接着就是Action:

       [HttpPost]
        public ContentResult LoadFile(HttpPostedFileBase FileData, string folder, string name)
        {
            string result = "";
            if (null != FileData)
            {
                try
                {
                    result = Path.GetFileName(FileData.FileName);//獲得文件名
                    string extension = Path.GetExtension(FileData.FileName);//獲得文件擴展名
                    string saveName = FileData.FileName + extension;//實際保存文件名
                    saveFile(FileData, folder, saveName);//保存文件
                }
                catch
                {
                    result = "";
                }
            }
            return Content(result);
        }

        [NonAction]
        private void saveFile(HttpPostedFileBase postedFile, string filepath, string saveName)
        {
            string phyPath = Request.MapPath("~" + filepath + "/");
            if (!Directory.Exists(phyPath))
            {
                Directory.CreateDirectory(phyPath);
            }
            try
            {
                postedFile.SaveAs(phyPath + saveName);
            }
            catch (Exception e)
            {
                throw new ApplicationException(e.Message);

            }
        }

       這部分的內容很簡單，就是從FileData中取出文件名和擴展名，然后保存起來而已。由於涉及到文件I/O，所以需要添加命名空間System.IO。
       大概就是這樣，具體的大家還是得去看官方文檔。