多附件上傳控件uploadify的使用心得


最近開發項目時使用到了多附件上傳控件。比較普遍使用的多附件上傳控件一般都是JS+FLASH,還有支持JS+HTML,JS+Silverlight等等,不過都沒有js+FLASH的普及,畢竟flashplayer現在基本上是個瀏覽器,上過網的都會安裝,所以使用JS+FLASH插件對客戶端的要求稍微簡單些。

因為以往使用過uploadify控件,所以做該項目時第一個考慮的就是它。

官網地址為http://www.uploadify.com/

現在已經出到了3.2版本,其功能強大,頁面效果相對比較美觀。我在項目嘗試的時候使用的例子如下:

去官網上下載版本后

前台頁面:

添加引用

jquery也是去官網上下載最新的,1.8版本

        <script language="javascript" src='/js/uploadify/jquery.min.js' type="text/javascript"></script>
        <script language="javascript" src='/js/uploadify/jquery.uploadify.min.js' type="text/javascript"></script>
        <LINK href='/js/uploadify/uploadify.css' type=text/css rel=stylesheet>

$("#uploadify").uploadify({
                'auto'     : false,     //false:選擇文件后不直接上傳,true選擇文件后直接上傳,默認是true
                'method'   : 'post', //傳遞給服務器文件的方式,默認就是post
                'swf'      : '/js/uploadify/uploadify.swf',  //控件中flash文件的地址,這個地址用相對地址和絕對地址都可以
                'uploader' : '/UploadHandler.aspx',       //后台服務的地址,我使用的是.net 做的開發,該地址最好使用相對地址,使用絕對地址時在很多情況下我用不了
                'fileTypeExts'  :'*.html;*.htm',            //選擇的文件過濾類型,選擇文件時可以只顯示你選擇的文件,如果不想做控制,則刪除即可
                'height':'20',                                  
                'width':'70',
                'buttonText':' 瀏覽...',
                'onSelect':function (file) {                                                              
                    $('#uploadify').uploadify('settings','formData',{
                            'param':'value',
                            'param2':'value'
                            });
                }, //這里設置附件帶的參數,因為某些參數不是在頁面初始化時就已經確定了的,所以最好在這里設置參數,意思就是說在選擇文件時候再去設置需要傳遞給后台的數據, 這樣就能夠附帶一些諸如選擇的上傳日期呀,之類的不是在頁面初始化完成時能確定的而需要用戶在上傳前設置的參數
                onQueueComplete:function(queueData){
                      alert('所選文件已經全部上傳');
                    }//這里可以獲取上傳完成后所有上傳隊列里的信息
            });

這些參數是項目中我需要設置的屬性,還有很多屬性和事件,諸如上傳失敗響應事件等等,具體可以看官網的文檔,不過貌似該控件並沒有對用戶自己定義的上傳失敗有相應的處理相應機制,控件提供的上傳失敗,只是針對服務器異常,比如IO異常,等等的處理機制,但如果用戶想自定義錯誤,比如根據業務邏輯,如果上傳的文件在服務器上找不到其對應的目錄,則報異常,對於這樣的自定義錯誤,我想到的是解決方案是使用onUploadSuccess該響應事件,根據后台的response.write信息來判斷該文件是否上傳成功。

HTML代碼:

//選擇控件的地方

<i nput type="text" disabled="true"><i nput id="uploadify" name="uploadify" type="button" value="添加">

//點擊上傳

< a runat="server" id="ibtMultiSubmit" href="javascript:$('#uploadify').uploadify('upload','*')">上傳</ a>

 

后台程序

             // 在此處放置用戶代碼以初始化頁面
                HttpPostedFile file= Request.Files["Filedata"];
                string param1=Request.Params["param1"];

                string param2=Request.Params["param2"];

 獲取到內容和參數后做自己的業務處理即可,如果沒有異常返回,則也不需要用response.write。

 該控件的使用大概如此,網上使用的資料也非常多。不過在本人使用控件的過程中,的確也出現了很多問題

 問題1:后台服務頁面的地址必須使用相對路徑(/UploadHandler.aspx)而不能使用絕對路徑(http://***/UploadHandler.aspx),該問題我在IE6和IE8上測試均出現該問題,Request.Files["Filedata"]為null。對此深感不明,希望有不同意見的同仁能共同探討一下

問題2:我做的這個項目的運行環境是IIS6+.NET 所以系統在輸入域名后,需要做一個跳轉頁面,因為系統很多子系統,有幾層的虛擬目錄,整個系統的首頁也是在虛擬目錄下,需要在站點目錄下做一個跳轉頁面,該跳轉頁面只有跳轉的功能,我們弄的時候,使用default.asp頁面,該頁面只有一句response.redirect(....)跳轉到整個系統的首頁。問題也就隨之而來,當我們使用域名直接訪問系統(經過default.asp頁面跳轉后)在進入我做的多附件上傳子系統,使用的時候,每次Request.Files["Filedata"]都為null,去網上查找了資料發現uploadify在使用flash時會導致站點的session丟失。並且response.redirect在一定程度上也會導致服務器通知客戶端重新請求,有破壞SESSION的可能性。雖然該控件官網上已經有了處理丟失SESSION 的解決方案,但在我做的這個例子中,出現的問題不是使用不了SESSION的問題,而是由該問題導致的Request.Files["Filedata"]為null的問題,當不經過跳轉頁面(default.asp)直接使用全路徑訪問系統http://www.**.com/indexwebui/index.aspx時,就能正常獲取Request.Files["Filedata"]。為了減少response.redirect對session的影響,我把跳轉頁面換成了default.html,在前台用JS做跳轉window.location.href=''的方式。這種方式下,通過跳轉頁面進入系統也會存在一個怪異的問題,當你手動清空IE頁面緩存后,使用uploadify控件上傳,Request.Files["Filedata"]依然為空,不過當你關閉IE瀏覽器頁面,再次打開只要你不去清空IE緩存,就能一直正常使用。根據我個人的分析,這貌似跟COOKIE和SESSION還是有點關系,只是不知道uploadify控件在與FLASH交互的過程機制是怎樣的。感興趣的同仁可以按照我這個環境再驗證一下我遇到的問題。本人可是被這個問題困擾了一段時間。

對於以上這兩個問題,使用pluload多附件上傳控件就不會遇到,只可惜pluload控件貌似不支持IE6,系統由於是老系統,推薦使用的是IE6,所以也沒辦法,只能使用uploadify,雖然清空緩存能導致它偶爾不能用,不過貌似也沒太多用戶喜歡清空緩存,並且該功能目前使用的人數不多,管理員才用,,,所以只能將就
如果有同仁還有更好的控件,又能支持IE6,又不會存在我以上分析的那兩個問題,請不吝賜教。

 

 

 


         

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM