[ASP.net MVC 4] ASP.net MVC + jQuery Uploadify 3.x版完整解決方案

2013-08-23

13291
0
ASP.net MVC
2013-10-28

前台

最近專案有個需求

1. 使用者可以在上傳檔案選檔時，一次選多個檔 => Html5 有支援：[HTML5] HTML5 File API by 小朱

2. 選擇檔案後，自動上傳，使用者不必再按Button去Post=>可以在<input type=”file” />加一個onchange的JS事件，讓表單POST，不過這招在IE會被擋

3. 剛好，客戶給我要上傳檔案的畫面又是包在頁籤div底下，所以我上傳檔案若POST頁面的話，User會回到第一個頁籤，降低使用者體驗

4. 客戶美工還給我一個上傳檔案的按鈕圖片，所以傳統<input type=”file” />得打造外觀了

經過以上考量，最後還是把以前寫WebForm用過的jQuery Uploadify套件拿出來用

官網：http://www.uploadify.com/

翻譯：

1. 支援選擇多檔案上傳

2. 選擇檔案後自動上傳

3. 上傳按鈕可以客製化外觀

4. 進度條顯示(進度不用自己算，套件做掉了)

5. 上傳檔案不會刷新頁面

6. 前端JS判斷上傳限制

官網文件說明可以看到有兩種套件：Uploadify(Flash版)和UploadFive(Html 5版)

本文介紹的是Flash版※注意3.x版和2.x版本的程式碼，參數名稱會不太一樣

官網Flash版Demo頁：http://www.uploadify.com/demos/

使用jQuery Uploadify的環境需求：

翻譯：

1. jQuery 1.4版以上

2. 用戶端的Flash Player 9版以上

3. 一種Server Side動態網頁技術，本文以ASP.net MVC為範例

實作

1.一開始不用進官網下載壓縮包，直接用Visual Studio 2012的NuGet套件管理員找「Uploadify」安裝就行

由於Uploadify在FireFox使用會有掉Session問題

所以先在Global.asax.cs 寫下


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Security;

namespace MvcApplicationjQueryUploadify
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801
    public class MvcApplication : System.Web.HttpApplication
    {
        #region Firefox用的jQuery Uploadify設定
        void Application_BeginRequest(object sender, EventArgs e)
        {
            
                string session_param_name = "ASPSESSID";
                string session_cookie_name = "ASP.NET_SessionId";
                if (HttpContext.Current.Request.Form[session_param_name] != null)
                {
                    UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
                }
                else if (HttpContext.Current.Request.QueryString[session_param_name] != null)
                {
                    UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);
                }
            


            //身份驗證
            
                string auth_param_name = "AUTHID";
                string auth_cookie_name = FormsAuthentication.FormsCookieName;
                if (HttpContext.Current.Request.Form[auth_param_name] != null)
                {
                    UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]);
                }
                else if (HttpContext.Current.Request.QueryString[auth_param_name] != null)
                {
                    UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);
                }
           
        }

        private void UpdateCookie(string cookie_name, string cookie_value)
        {
            HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
            if (null == cookie)
            {
                cookie = new HttpCookie(cookie_name);
            }
            cookie.Value = cookie_value;
            HttpContext.Current.Request.Cookies.Set(cookie);//重新設定cookie
        }

        #endregion 


        protected void Application_Start()
        {
            #region 建立資料夾(上傳檔案用)
            string fileDir = Server.MapPath("~/Uploads/");
            if (!Directory.Exists(fileDir))
            {
                Directory.CreateDirectory(fileDir);
            }
            #endregion 







            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }
    }
}

再來是上傳檔案的Controller Code


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Security;

namespace MvcApplicationjQueryUploadify.Controllers
{
    public class HomeController : Controller
    {
      
        [HttpGet]
        public ActionResult Index()
        {
           
            
            return View();
        }

        /// <summary>
        /// 上傳一筆檔案(前端Uploadify會呼叫此Action)
        /// </summary>
        /// <param name="Filedata">此參數名稱可以在Uploadify設定</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UploadFile(HttpPostedFileBase Filedata)
        {
            
            if (Filedata != null && Filedata.ContentLength>0)
            {
                try
                {
                    
                    // 檔案上傳的儲存資料夾
                    string fileDir = Server.MapPath("~/Uploads/");
                    
                    string ext = Path.GetExtension(Filedata.FileName); //副檔名
                    string newName = Guid.NewGuid().ToString() + ext; // 新檔名

                    Filedata.SaveAs(Path.Combine(fileDir,newName));

                    //成功就回傳該圖片的URL
                    return Content(Url.Content("~/Uploads/" + newName));
                    
                }
                catch (Exception ex)
                {
                    //寫Log
                    return Content("");
                }
            }
            return Content("");
          
        }


    }
}

前端View Uploadify叫用方法：



<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*引用Uploadify樣式，Queue會用到*@
    <link href="~/Scripts/uploadify/uploadify.css" rel="stylesheet" />
    @*引用jQuery核心函式庫*@
    <script src="~/Scripts/jquery-1.4.4.min.js"></script>
    @*引用uploadify核心*@
    <script src="~/Scripts/uploadify/jquery.uploadify-3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(init);
        function init()
        {
            //解決Firefox掉Session用的程式碼
            var ASPSESSID = "@Session.SessionID";
            var AUTHID = "@(Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value)";

            var width = 814;
            var height = 269;
            var buttonImageUrl = "@Url.Content("~/Content/Images/GoogleImg.png")";//這是我自己準備的按鈕圖

            //js註冊使用jQuery Uploadify
            //Filedata為input的id
            //queue為div id，佇列div的 id
            UploadFileFunc("Filedata", "queue", ASPSESSID, AUTHID,width,height,buttonImageUrl);



            
           

        }
        //這個function再自行放到自己的.js檔
        function UploadFileFunc(FiledataID, QueueID, ASPSESSID, AUTHID,width,height,buttonImageUrl)
        {
            $('#' + FiledataID).uploadify({
                buttonImage: buttonImageUrl,//依美工給的圖置換上傳按鈕圖
                width: width,//按鈕寬度和圖片一樣
                height: height,//按鈕高度和圖片一樣

                swf: '/Scripts/uploadify/uploadify.swf',//必填
                uploader: '/Home/UploadFile',//使用哪個Action 做上傳
            

                multi: true,//true支援選擇多檔案上傳
                auto: true,//設置true，檔案選擇框，一按確定就上傳，false的話，要另外呼叫方法傳遞upload參數觸發上傳行為
                fileTypeExts: '*.jpg;*.gif;*.png',//限制可以選擇的檔案類型
                fileTypeDesc: 'Image Files (.jpg, .gif, .png)',//選擇檔案時的說明
                fileSizeLimit: '4MB',//在js端就限制檔案大小，User選擇超過大小的檔案時，就會跳出error
                queueID: QueueID,//上傳進度條呈現的地方
                queueSizeLimit: 4,//限制queue的數量
                simUploadLimit: 0,//同時上傳檔案數，0為無限
                removeCompleted: true,//檔案上傳完成時，畫面上的佇列是否消失
               
                fileObjName: 'Filedata',//Server端的Action，以什麼名稱接收HttpPostedFileBase物件

                onSelectError: function (file) {//當選擇檔案不符合條件時，觸發： http://www.uploadify.com/documentation/uploadify/onselecterror/

                    //alert('The file ' + file.name + ' returned an error and was not added to the queue.');

                },
                onUploadSuccess: function (file, data, response) {
                    //一個佇列上傳成功時
                    //alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
                    //data參數是Controller回傳的字串，想要Json格式的話，要再另外找Plugin把字串轉成Json物件
                    //以本文範例data就是該圖片上傳後的Url字串
                    
                },
                onQueueComplete: function (queueData) {
                    //全部佇列執行完畢時
                    //alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
                    

                },
                //解決Firefox掉Session的程式碼，ASPSESSID和AUTHID命名要和Global.asax.cs裡寫的一樣
                formData: {
                    ASPSESSID: ASPSESSID, 
                    AUTHID: AUTHID
                }




            });

        }
       
</script>
  
</head>
<body>
   
     @*※為div queue加上style="display:none;"，就可以隱藏queue了*@
     <div id="queue" ></div>
     <input id="Filedata" type="file" name="Filedata"   />
       

 

 


</body>
</html>

如果上傳中Queue發生錯誤404 Error