JQuery.Uploadify asp.net(C#)檔案,多檔案上傳外掛程式, Session 擷取不到等錯誤

文章目錄

• 在Global.asax的Application_BeginRequest中添加如下代碼

Uploadify是JQuery的一個上傳外掛程式，帶進度顯示, 支援多檔案上傳。不過官方提供的執行個體時php版本的

Uploadify唯一的缺點就是不支援中文按鈕

官方下載  官方文檔  官方示範

實現

Uploadify實現最低要求:

jQuery 1.4.x or greater

swfObject 2.2 or greater

Flash Player 9.0.24 or greater

所需檔案

cancel.png

jquery.uploadify.v2.1.4.min.js

jquery-1.4.2.min.js

swfobject.js

uploadify.css

uploadify.php

uploadify.swf

基本代碼

    <script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>    <script type="text/javascript" src="/uploadify/swfobject.js"></script>    <script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>    <script type="text/javascript">    // <![CDATA[    $(document).ready(function() {      $('#file_upload').uploadify({        'uploader'  : '/uploadify/uploadify.swf',        'script'    : '/uploadify/uploadify.php',        'cancelImg' : '/uploadify/cancel.png',        'folder'    : '/uploads',        'auto'      : true      });    });    // ]]>    </script>

* 確保你有上傳的檔案夾的寫入許可權.

<input type="file" name="uploadify" id="uploadify" /><a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a>    

主要參數

樣本:

$(document).ready(function() {$('#fileInput1').fileUpload({'uploader': 'uploader.swf',//不多講了'script': '/AjaxByJQuery/file.do',//處理Action'cancelImg': 'cancel.png','folder': '',//服務端預設儲存路徑'scriptData':{'methed':'uploadFile','arg1','value1'},//向後台傳遞參數,methed,arg1為參數名,uploadFile,value1為對應的參數值,服務端通過request["arg1"]'buttonText':'UpLoadFile',//按鈕顯示文字,不支援中文,解決方案見下//'buttonImg':'圖片路徑',//通過設定背景圖片解決中文問題,就是把背景圖做成按鈕的樣子'multi':'true',//多檔案上傳開關 'fileExt':'*.xls;*.csv',//檔案過濾器'fileDesc':'.xls',//檔案過濾器 詳解見文檔   'onComplete' : function(event,queueID,file,serverData,data){ //serverData為伺服器端返回的字串值alert(serverData); }});});

scriptData

向後台傳遞參數,methed,arg1為參數名,uploadFile,value1為對應的參數值,服務端通過request.getP

onComplete中serverData

後台傳回前台的值

選擇性參數

uploadify函數的參數為json格式，可以對json對象的key值的修改來進行自訂的設定，如multi設定為true或false來控制是否可以進行多檔案上傳，下面就來介紹下這些key值的意思：

uploader ： uploadify.swf 檔案的相對路徑，該swf檔案是一個帶有文字BROWSE的按鈕，點擊後淡出開啟檔案對話方塊，預設值：uploadify.swf。

script ：   幕後處理程式的相對路徑 。預設值：uploadify.php

checkScript ：用來判斷上傳選擇的檔案在伺服器是否存在的幕後處理程式的相對路徑

fileDataName ：設定一個名字，在伺服器處理常式中根據該名字來取上傳檔案的資料。預設為Filedata

method ： 提交方式Post 或Get 預設為Post

scriptAccess ：flash指令檔的訪問模式，如果在本地測試設定為always，預設值：sameDomain 
folder ：  上傳檔案存放的目錄 。

queueID ： 檔案隊列的ID，該ID與存放檔案隊列的div的ID一致。 進度條放置的位置

queueSizeLimit ： 當允許多檔案產生時，設定選擇檔案的個數，預設值：999 。

multi ： 設定為true時可以上傳多個檔案。

auto ： 設定為true當選擇檔案後就直接上傳了，為false需要點擊上傳按鈕才上傳 。

fileDesc ： 這個屬性值必須設定fileExt屬性後才有效，用來設定選擇檔案對話方塊中的提示文本，如設定fileDesc為“請選擇rar doc pdf檔案”，開啟檔案選擇框效果如：

fileExt ： 設定可以選擇的檔案的類型，格式如：'*.doc;*.pdf;*.rar' 。

sizeLimit ： 上傳檔案的大小限制 。

simUploadLimit ： 允許同時上傳的個數 預設值：1 。

buttonText ： 瀏覽按鈕的文本，預設值：BROWSE 。

buttonImg ： 瀏覽按鈕的圖片的路徑 。

hideButton ： 設定為true則隱藏瀏覽按鈕的圖片 。

rollover ： 值為true和false，設定為true時當滑鼠移到瀏覽按鈕上時有反轉效果。

width ： 設定瀏覽按鈕的寬度 ，預設值：110。

height ： 設定瀏覽按鈕的高度 ，預設值：30。

wmode ： 設定該項為transparent 可以使瀏覽按鈕的flash背景檔案透明，並且flash檔案會被置為頁面的最高層。 預設值：opaque 。

cancelImg ：選擇檔案到檔案隊列中後的每一個檔案上的關閉按鈕表徵圖，如：

上面介紹的key值的value都為字串或是布爾類型，比較簡單，接下來要介紹的key值的value為一個函數，可以在選擇檔案、出錯或其他一些操作的時候返回一些資訊給使用者。

onInit : 做一些初始化的工作。

onSelect ：選擇檔案時觸發，該函數有三個參數

event:事件對象。

queueID：檔案的唯一標識，由6為隨機字元組成。

fileObj：選擇的檔案對象，有name、size、creationDate、modificationDate、type 5個屬性。

$(document).ready(function(){    $("#uploadify").uploadify({        'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',        'script': 'UploadHandler.ashx',        'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',        'folder': 'UploadFile',        'queueID': 'fileQueue',        'auto': false,        'multi': true,        'onInit':function(){alert("1");},        'onSelect': function(e, queueId, fileObj)        {            alert("唯一標識:" + queueId + "\r\n" +                  "檔案名稱：" + fileObj.name + "\r\n" +                  "檔案大小：" + fileObj.size + "\r\n" +                  "建立時間：" + fileObj.creationDate + "\r\n" +                  "最後修改時間：" + fileObj.modificationDate + "\r\n" +                  "檔案類型：" + fileObj.type            );        }    });});  

 

onSelectOnce ：在單檔案或多檔案上傳時，選擇檔案時觸發。該函數有兩個參數event，data，data對象有以下幾個屬性：

fileCount：選擇檔案的總數。

filesSelected：同時選擇檔案的個數，如果一次選擇了3個檔案該屬性值為3。

filesReplaced：如果檔案隊列中已經存在A和B兩個檔案，再次選擇檔案時又選擇了A和B，該屬性值為2。

allBytesTotal：所有選擇的檔案的總大小。

onCancel : 當點擊檔案隊列中檔案的關閉按鈕或點擊取消上傳時觸發。該函數有event、queueId、fileObj、data四個參數，前三個參數同onSelect 中的三個參數，data對象有兩個屬性fileCount和allBytesTotal。

fileCount：取消一個檔案後，檔案隊列中剩餘檔案的個數。

allBytesTotal：取消一個檔案後，檔案隊列中剩餘檔案的大小。

onClearQueue ：當調用函數fileUploadClearQueue時觸發。有event和data兩個參數，同onCancel 中的兩個對應參數。

onQueueFull ：當設定了queueSizeLimit並且選擇的檔案個數超出了queueSizeLimit的值時觸發。該函數有兩個參數event和queueSizeLimit。

onError ：當上傳過程中發生錯誤時觸發。該函數有event、queueId、fileObj、errorObj四個參數，其中前三個參數同上，errorObj對象有type和info兩個屬性。

type：錯誤的類型，有三種‘HTTP’, ‘IO’, or ‘Security’

info：錯誤的描述

onOpen ：點擊上傳時觸發，如果auto設定為true則是選擇檔案時觸發，如果有多個檔案上傳則遍曆整個檔案隊列。該函數有event、queueId、fileObj三個參數，參數的解釋同上。

onProgress ：點擊上傳時觸發，如果auto設定為true則是選擇檔案時觸發，如果有多個檔案上傳則遍曆整個檔案隊列，在onOpen之後觸發。該函數有 event、queueId、fileObj、data四個參數，前三個參數的解釋同上。data對象有四個屬性percentage、 bytesLoaded、allBytesLoaded、speed：

percentage：當前完成的百分比

bytesLoaded：當前上傳的大小

allBytesLoaded：檔案隊列中已經上傳完的大小

speed：上傳速率 kb/s

onComplete：檔案上傳完成後觸發。該函數有四個參數event、queueId、fileObj、response、data五個參數，前三個參數同上。response為幕後處理程式返回的值，在上面的例子中為1或0，data有兩個屬性fileCount和speed

fileCount：剩餘沒有上傳完成的檔案的個數。

speed：檔案上傳的平均速率 kb/s

$('#file_upload').uploadify({  'uploader'    : '/uploadify/uploadify.swf',  'script'      : '/uploadify/uploadify.php',  'cancelImg'   : '/uploadify/cancel.png',  'folder'      : '/uploads',  'multi'       : true,  'onComplete'  : function(event, ID, fileObj, response, data) {  alert('There are ' + data.fileCount + ' files remaining in the queue.');}});

註：fileObj對象和上面講到的有些不太一樣，onComplete 的fileObj對象有個filePath屬性可以取出上傳檔案的路徑。

onAllComplete：檔案隊列中所有的檔案上傳完成後觸發。該函數有event和data兩個參數，data有四個屬性，分別為：

filesUploaded :上傳的所有檔案個數。

errors ：出現錯誤的個數。

allBytesLoaded ：所有上傳檔案的總大小。

speed ：平均上傳速率 kb/s

    $('#file_upload').uploadify({      'uploader'      : '/uploadify/uploadify.swf',      'script'        : '/uploadify/uploadify.php',      'cancelImg'     : '/uploadify/cancel.png',      'folder'        : '/uploads',      'onAllComplete' : function(event,data) {          alert(data.filesUploaded + ' files uploaded successfully!');        }    });

在上面的例子中已經用了uploadifyUpload和uploadifyClearQueue兩個函數，除此之外還有幾個函數：

uploadifySettings：可以動態修改上面介紹的那些key值，如下面代碼

$('#uploadify').uploadifySettings('folder','JS');

如果上傳按鈕的事件寫成下面這樣，檔案將會上傳到uploadifySettings定義的目錄中

<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');

$('#uploadify').uploadifyUpload()">上傳</a>

uploadifyCancel：該函數接受一個queueID作為參數，可以取消檔案隊列中指定queueID的檔案。

$('#uploadify').uploadifyCancel(id);

常見錯誤:1.檔案大小超了.

    <configuration><system.web>                <httpRuntime maxRequestLength="102400" executionTimeout="3600" /></system.web>    </configuration>

2.Session 擷取不到

    Flash在IE下會把當前頁面的Cookie發到Upload.ashx，但是Chrome、Firefox下則不會把當前頁面的Cookie發到Upload.ashx。因為Session是靠Cookie中儲存的SessionId實現的（傳智播客的ASP.Net視頻教程中講到了Session和Cookie的關係，對於這點不熟悉的可以參考《傳智播客視頻教程2011版：ASP.NET≠拖控制項》），這樣由於當前頁面的Cookie不會傳遞給Flash請求的Upload.ashx，因此請求的檔案發送到Upload.ashx就是一個新的Session了，當然這個Session就是沒有登入的了。

    解決這個問題的思路也很簡單，那就是手動把SessionId傳遞給伺服器，再伺服器端讀出SessionId再載入Session。

在Global.asax的Application_BeginRequest中添加如下代碼

#region 上傳組件        void Application_BeginRequest(object sender, EventArgs e)        {            //flash 上傳組件Session 值恢複            //'scriptData': { 'ASPSESSID': '<%=Session.SessionID %>' }            try            {                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]);                }            }            catch (Exception ex)            {                //Response.StatusCode = 500;                //Response.Write("Error Initializing Session");            }            //如果網站中還用到了Membership的FormsAuthentication驗證，則還需要把AUTHID也按照SessionID的方法進行處理            //'scriptData': {"ASPSESSID": "<%=Session.SessionID %>","AUTHID" : "<%=Request.Cookies[FormsAuthentication.FormsCookieName].Value%>"}            try            {                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]);                }            }            catch (Exception ex)            {                //Response.StatusCode = 500;                //Response.Write("Error Initializing Forms Authentication");            }        }        void UpdateCookie(string cookie_name, string cookie_value)        {            HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);            if (cookie == null)            {                cookie = new HttpCookie(cookie_name);                HttpContext.Current.Request.Cookies.Add(cookie);            }            cookie.Value = cookie_value;            HttpContext.Current.Request.Cookies.Set(cookie);        }        #endregion

後端接收代碼

        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            context.Response.Charset = "utf-8";            HttpPostedFile file = context.Request.Files["Filedata"];            string uploadPath =                HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";            if (file != null)            {                if (!Directory.Exists(uploadPath))                {                    Directory.CreateDirectory(uploadPath);                }                file.SaveAs(uploadPath + file.FileName);                //下面這句代碼缺少的話，上傳成功後上傳隊列的顯示不會自動消失                context.Response.Write("上傳成功!");            }            else            {                context.Response.Write("0");            }        }

源碼下載: Uploadify.zip