[Flash FileUpload]用flash.net.FileReference實現ASP.NET無重新整理檔案上傳

 

********************************************************************
*                                                 著作權聲明
*
* 本文以Creative Commons的發布,請嚴格遵循該授權協議。
* 本文首發於部落格園, 此聲明為本文章中不可或缺的一部分。
* 作者網名：    浪子
* 作者EMAIL：dayichen (at)163.com
* 作者BLOG：  Http://Www.Cnblogs.Com/Walkingboy
*
********************************************************************

[Flash FileUpload]用flash.net.FileReference實現無重新整理檔案上傳

－Written by http://walkingboy.cnblogs.com/ (07-02-07)

摘要：

還在用UpdatePanel嘛？是否還為檔案上傳苦惱？

還在用Callback嘛？是否對檔案上傳無計可施？

還在用Ajax上傳組件嘛？是否為其不穩定性而頭疼不已？

兄弟忘了這些吧，讓我們拾起古老的Flash，跟我一道將積蓄已久的無奈、鬱悶踩於腳下......

一、楔子

一直都無法忘懷那段癡迷Flash的大學時代，從認識動畫，到ActionScript，再到苦練鼠繪，所有付出的時間和睡眠都代表了我對Flash的情有獨鐘，曾經一直都在幻想畢業後可以從事Flash編程工作。可能自己的先天美感不足或者運氣不佳，最終還是遠離了自己一直鐘愛的Flash。

時隔多年，Flash有了長足的發展，Flex更是呈現一片喜人的景象。

但是個人認為，如果Flash定位為富用戶端，而不摻合服務端的推廣，我相信現在的很多js類庫將失去他們的市場。

喂，誰的臭襪子，稍微理解下我沉浸往事，不能自拔的心情嘛：）

二、上傳難題

以前用UpdatePanel的時候，涉及到上傳都只能在做一個小頁面用Postback來做；

現在用Callback，還是只能使用新頁面在Postback；

嘗試過好幾個Ajax 上傳組件，最終敗倒在其不穩定下。

昨天偶在codeproject尋找資料，看到Flash 上傳檔案的介紹，才突然想起這個被自己遺忘在角落裡的咚咚。

察看了下Flash 的API，發現FileReference和FileReferenceList對檔案的上傳支援已經相當的好了。 

事件摘要

事件        說明

onCancel = function(fileRef:FileReference) {}

當使用者取消檔案瀏覽對話方塊時調用。

onComplete = function(fileRef:FileReference) {}

當上傳或下載操作成功完成時調用。

onHTTPError = function(fileRef:FileReference, httpError:Number) {}

當上傳由於 HTTP 錯誤而失敗時調用。

onIOError = function(fileRef:FileReference) {}

當發生輸入/輸出錯誤時調用。

onOpen = function(fileRef:FileReference) {}

當上傳或下載操作開始時調用。

onProgress = function(fileRef:FileReference, bytesLoaded:Number, bytesTotal:Number) {}

在檔案上傳或下載操作期間定期調用。

onSecurityError = function(fileRef:FileReference, errorString:String) {}

當上傳或下載由於安全錯誤而失敗時調用。

onSelect = function(fileRef:FileReference) {}

當使用者從檔案瀏覽對話方塊選擇要上傳或下載的檔案時調用。

基本上上傳檔案所需要的功能都有了。

三、SWF FileUpload

很久沒有寫ActionStcript，變得好生疏了，熟悉了一個下午才算緩過氣來了。定下了這個上傳組件的需求：

接受Handler：支援內嵌的HttpHandler處理和自訂的Aspx處理（提供傳遞參數）

進度條顯示：計算總數和已上傳數

提供結束JS事件：上傳結束觸發指定的js方法，並將檔案名稱作為參數

花了一個晚上才寫好這個swf，調用相當的簡單 

內嵌HttpHandler,不做任何處理的調用

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"

width="250" height="80" id="SWFFileUpload" align="middle">

<param name="allowScriptAccess" value="sameDomain" />

<param name="movie" value="SWFFileUpload.swf" />

<param name="quality" value="high" />

<param name="FlashVars" value="CompletedFunction=OnCompleted">

<embed src="SWFFileUpload.swf" name="fileUpload1" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

 使用內建的HttpHandler，需要在WebConfig配置HttpHandler資訊： 

<httpHandlers>

<add verb="*" path="SWFFileUpload.axd" type="SWFFileUpload.SWFFileUpload" validate="false"/>

</httpHandlers>

 

 然後檔案會預設被上傳到root/UploadFiles/底下，檔案名稱與用戶端檔案名稱同，同名則覆蓋 

指定HttpHandler，指定參數

<br />

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"

width="250" height="80" id="Object1" align="middle">

<param name="allowScriptAccess" value="sameDomain" />

<param name="movie" value="SWFFileUpload.swf" />

<param name="quality" value="high" />

<param name="wmode" value="transparent">

<%--flash組件的參數傳遞：

UploadPage：自訂的ASPX檔案接受Handler

Args：傳遞到UploadPage的參數，最終以QueryString的形式傳遞,以；分割

CompletedFunction：上傳結束後調用的js方法

FileExtension：上傳檔案類型過濾，以；分割

--%>

<param name="FlashVars" value="UploadPage=CustomerHandler.aspx&Args=name=cdy;blog=walkingboy.cnblogs.com&CompletedFunction=OnCompleted&FileExtension=*.jpg;*.txt">

<embed src="SWFFileUpload.swf" name="fileUpload2" align="middle"

allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

         如果檔案大的話，需要在webconfig配置（Macromedia官方聲稱可以支援100M的上傳） 

<httpRuntime maxRequestLength="1550000"/>

 

四、擴充&Demo

目前我只做了單檔案的上傳，可以利用FileReferenceList將其擴充為多檔案上傳。

如果你的IE打了最新的補丁，你可能發現出現“單擊以啟用並使用此控制項”的問題，可以考慮封裝一個js類，來動態Writer swf object，就可以搞定這個問題。 

function FileUpload(){

return{

Show:function(){

//TODO:

},

Hide:function(){

//TODO:

}

}

}();

DEMO代碼下載：SWFFileUpload.WetTest.rar
有些朋友使用過程中出現問題，沒辦法得到真正的錯誤資訊，現將flash的原始碼fla上傳，有問題的朋友自己測試下吧： SwfFileUpload.fla updated by langzi at 07.11.21 
 Update 07.12.19 原來上傳的swffileupload.fla丟失了，重新上傳。