uploadify的asp.NET圖片上傳並處理session丟失的解決方案

外掛程式在asp教程.net網站中的一個應用執行個體，希望對大家有所協助，寫得有什麼不妥的地方也希望大家能夠指出和見諒（這是在下技術部落格中的處女作）。好了，以下就是該外掛程式的主要使用方法。

<title>uploadify -- 樣本</title>
 
<script type="text/網頁特效" src="uploader/jquery-1.4.1.min.js" kesrc="uploader/jquery-1.4.1.min.js"></script>
 
<script type="text/javascript" src="uploader/jquery.uploadify.v2.1.0.min.js" kesrc="uploader/jquery.uploadify.v2.1.0.min.js"></script>
 
<script type="text/javascript" src="uploader/swfobject.js" kesrc="uploader/swfobject.js"></script>
 
<link type="text/css教程" href="uploader/uploadify.css" kesrc="uploader/uploadify.css" rel="stylesheet">
<style type="text/css">
.wrapper{ width:400px; margin:10px auto}
</style>
 
<form id="form1" runat="server">
    <div class="wrapper">
        <b>uploadify 樣本程式</b>
        <div id="fileinput1">
        </div>
        <a href="javascript:$('#fileinput1').uploadifyupload()" kesrc="javascript:$('#fileinput1').uploadifyupload()">上傳</a> | <a href="javascript:$('#fileinput1').uploadifyclearqueue()" kesrc="javascript:$('#fileinput1').uploadifyclearqueue()">
            取消上傳</a>
    </div>
 
    <script type="text/javascript">
    $("#fileinput1").uploadify({
        'uploader': 'uploader/uploadify.swf',
        'method': 'get',
        'script': 'uploadfile.aspx',
        'cancelimg': 'uploader/cancel.png',
        'auto': false,
        'multi': true,
    });
    </script>
 
</form>

flash的，因此我們用swfobject.js來處理flash，swfobject是一個用於在html中方面插入adobe flash媒體資源（*.swf檔案）的獨立、敏捷的javascript模組。該模組中的javascript指令碼能夠自動檢測pc、mac機器上各種主流瀏覽器對flash外掛程式的支援情況。它使得插入flash媒體資源盡量簡捷、安全。而且它是非常符合搜尋引擎最佳化的原則的。此外，它能夠避免您的 html、xhtml中出現object、embed等非標準標籤，從而符合更加標準

 

public partial class uploadfile : system.web.ui.page
{
    protected void page_load(object sender, eventargs e)
    {
        try
        {
            //擷取上傳的檔案資料
            httppostedfile file = request.files["filedata"];    
            string filename = file.filename;
            //由於不同瀏覽器取出的filename不同（有的是檔案絕對路徑，有的是只有檔案名稱），故要進行處理
            if (filename.indexof('') > -1)    
            {
                filename = filename.substring(filename.lastindexof('') + 1);
            }
            else if (filename.indexof('/') > -1)
            {
                filename = filename.substring(filename.lastindexof('/') + 1);
            }
            //上傳的目錄
            string uploaddir = "~/files/";
            //上傳的路徑
            string uploadpath = uploaddir + guid.newguid() + filename;
            //儲存檔案
            file.saveas(server.mappath(uploadpath));
            //下面這句代碼缺少的話，上傳成功後上傳隊列的顯示不會自動消失
            response.write("1");
        }
        catch
        {
            response.write("0");
        }
    }
}

原來一般情況下，因為諸如uploadify,swfupload採用的都是flash用戶端，這樣它們產生的useragent與使用者使用瀏覽器的 user-agent必然不同。所以，雖然使用者登入了你的系統產生了一個session，但是當觸發上傳程式時會產生另一個session（在上述 useragent選項開啟的情況下）。所以，不是session丟失了，而是當你上傳檔案時，ci為uploadify另外建立了一個session。好了，既然找到問題的根源，我們就想辦法讓伺服器在session判空之前將session值手動傳遞過去。

在asp.net教程中的解決方案如下：

在上傳的那個頁面中加入以下代碼

var auth = "<% = request.cookies[formsauthentication.formscookiename]==null ? string.empty : request.cookies[formsauthentication.formscookiename].value %>";
var asps教程essid = "<%= session.sessionid %>";

然後初始化外掛程式的代碼改成如下形式

$("#fileinput1").uploadify({
            'uploader': '/scripts/uploader/uploadify.swf',
            'method': 'get',
            'script': '/mystudio/gouploadavatar',
            'cancelimg': '/scripts/uploader/cancel.png',
            'sizelimit': 2048000,
            'multi': false,
            'filedesc': '選擇jpg,png,gif',
            'fileext': '*.jpg;*.png;*.gif',
 
            'oncomplete': function (e, queueid, fileobj, response, data) {
 
            },
           'onselectonce': function (e, data) {
                $('#fileinput1').uploadifysettings('scriptdata', { 'aspsessid': aspsessid, 'authid': auth });
            }
 });

注意上面有一句，很關鍵

$('#fileinput1').uploadifysettings('scriptdata', { 'aspsessid': aspsessid, 'authid': auth });

接下來我們必須在服務端session判空並建立之前，將傳遞過來的sessonid強制賦給當前請求的cookies，這樣服務端就認為還是原來的session傳遞過來了。具體做法我們可以在global.asax檔案中加入如下代碼

protected void application_beginrequest(object sender, eventargs e)
        {
            /* we guess at this point session is not already retrieved by application so we recreate cookie with the session id... */
            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
            {
            }

            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
            {
            }
        }

        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);
        }

這時候你訪問上傳檔案的那個頁面時可能會報“工作階段狀態已建立一個會話 id，但由於響應已被應用程式重新整理而無法儲存它”的錯誤，這時，你可以在web.config檔案改變session的儲存方式，一般預設都是以 “inproc”儲存的，我們把它改成stateserver模式，即在system.web節點下加入

<sessionstate mode="stateserver" stateconnectionstring="tcpip=127.0.0.1:42424" timeout="30"></sessionstate>

ok，問題解決，雖然看起來解決這個問題比較麻煩（不知道在其他網站中怎麼弄，至少在.net中比較麻煩），但這麼好的一個檔案上傳外掛程式，這樣做很值得

 

基於jquery+flash的多檔案上傳外掛程式uploadify，暫且不具體介http://www.uploadify.com/demos/紹，先來看看效果圖吧。

怎麼樣，效果不錯吧，既支援多檔案上傳，又能有進度提示，給使用者非常好的體驗，而且這是一個開源項目，大家可以在自己的項目中自由的使用和修改。
項目首頁地址:http://www.uploadify.com/    外掛程式示範地址:http://www.uploadify.com/demos/
外掛程式下載地址:http://www.uploadify.com/download/   外掛程式使用文檔:http://www.uploadify.com/documentation/

好了關於一些常用參數

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個屬性。
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
onallcomplete：檔案隊列中所有的檔案上傳完成後觸發。該函數有event和data兩個參數，data有四個屬性，分別為：

filesuploaded :上傳的所有檔案個數。
errors ：出現錯誤的個數。
allbytesloaded ：所有上傳檔案的總大小。
speed ：平均上傳速率 kb/s