基于Iframe內聯框架的異步文件上傳與刪除

羅斌，巴繼東

（1.武漢郵電科學研究院湖北武漢430065；2.武漢長江通信智聯技術有限公司湖北武漢430065）

基于Iframe內聯框架的異步文件上傳與刪除

羅斌1，巴繼東2

（1.武漢郵電科學研究院湖北武漢430065；2.武漢長江通信智聯技術有限公司湖北武漢430065）

針對使用低版本瀏覽器的用戶因安全策略導致無法上傳文件的問題，采用一種基于Iframe的內聯框架的解決方案能夠實現異步文件上傳、刪除等功能。用這種方式上傳圖片、音視頻等多媒體文件時，能在不跳轉頁面情況下看到所上傳圖片的預覽。同時，文件相關信息通過Web服務器傳遞到后臺數據庫中，并通過內聯框架子網頁的服務端將文件以文件的形式存儲到本地項目的指定目錄下。根據需要，可查看和刪除所選擇的文件及相關信息。實際應用表明，該方案操作簡便、能更好地解決文件上傳、刪除等問題。

內聯框架；文件上傳；異步；子網頁

在Web應用程序開發過程中，文件上傳［1-2］功能是個很常用又非常重要的功能，它要處理的內容主要包括：如何將上傳的文件以文件的形式保存到服務器，上傳Internet上的資源，提取相應文件名等信息傳遞到數據庫，以及查看、刪除上傳的多媒體文件。

在進行執法報告管理模塊下的文件上傳等功能的開發過程中，遇到這樣的問題：當用戶在使用IE9及以下版本的瀏覽器界面點擊文件上傳按鈕的時候，由于安全策略的原因，無法調用文件上傳控件FileUpload，在進行執法報告頁面表單［3］提交的時候會提示拒絕訪問，執法報告管理頁面服務端aspx.cs的保存文件代碼無法被執行，上傳的多媒體文件并沒有以文件的形式保存到服務器中。盡管ajax技術已廣泛用于Web開發，或許用過ajax上傳圖片，但事實上它不是只使用ajax技術實現的，因為純粹原始的ajax是javascript+xml實現的，出于安全的原因，沒有辦法利用javascript將文件以異步請求的方式上傳到服務器，看似ajax技術上傳文件的功能，實際上是通過form和Iframe來實現的。本文設計了一種基于Iframe［4］內聯框架的異步文件上傳方案，其基本原理是輸出一段javascript代碼到隱藏的Iframe中去執行，并建立起Iframe子頁面和父頁面之間的通信［5］，將需上傳的多媒體文件通過Iframe進行異步表單提交，這樣可以將上傳的多媒體文件以文件的形式保存到本地項目的指定目錄下。應用該方案可以較好地解決由于低版本瀏覽器因安全策略導致的無法上傳文件的相關問題，實現了將上傳的文件以文件的形式存儲到本地項目的指定目錄下，根據需要可刪除、查看相應的多媒體文件。

1　系統設計與實現

1.1系統架構原理

通過分析，執法報告管理模塊下的文件上傳、刪除、查看等系統功能采用B/S［6-7］模式的三層架構模型來進行開發，旨在達到分工明確、便于維護、可擴展的目的。B/S模式下的三層架構模型將應用程序結構劃分為三層獨立的部分，包括用戶表示層、業務邏輯層、數據訪問層。表示層位于最上層，主要為用戶提供一個可與系統進行交互的界面，它可以向業務邏輯層發送用戶的輸入參數，也可從業務邏輯層接受結果并顯示數據等。業務邏輯層在體系架構中的位置很關鍵，它處于表示層與數據訪問層中間，主要是從Web表示層接受請求，根據編碼的業務邏輯處理請求，從數據庫訪問層獲取數據或將數據發送到數據訪問層，將處理結果傳遞回Web表示層。數據訪問層處于最下層，主要是直接對數據庫進行操作，涉及到數據的增加、刪除、修改、查詢等功能。B/S三層架構的結構圖如圖1所示。

圖1　B/S三層架構模型圖

1.2文件上傳結構設計

基于Iframe內聯框架的異步多媒體文件上傳結構設計如圖2所示，文件上傳過程是基于B/S架構的，用戶通過電腦訪問執法報告管理（系統）的aspx網頁，點擊上傳文件按鈕，然后發出文件上傳請求，Web服務器接受用戶請求后，通過Iframe子網頁將上傳的多媒體的文件以文件形式存儲到本地項目的指定目錄下，與此同時，Web服務器再將上傳文件的文件名等相關信息傳遞到后臺數據庫中。數據庫返回結果到Web服務器，Web服務器返回響應到客戶端瀏覽器，用戶可以從附件列表查看到所上傳的文件相關信息。

圖2　多媒體文件上傳

1.3文件刪除結構設計

如圖3所示為多媒體文件刪除的結構設計圖，文件刪除過程也是基于B/S架構的。用戶可通過電腦訪問執法報告管理系統的aspx網頁，當需要刪除某個多媒體文件的時候，點擊附件列表中對應文件信息行的刪除按鈕，此時Web服務器接收到刪除文件請求后，通過Iframe子網頁與父網頁執法報告管理頁面進行通信，刪除本地項目指定目錄下所存儲的相應多媒體文件。與此同時，Web服務器向后臺數據庫傳遞所要刪除的多媒體文件名等相關信息，數據庫返回結果到Web服務器，Web服務器返回響應到客戶端瀏覽器，用戶可以查看刪除多媒體文件之后的附件列表，以確認已刪除了相應的多媒體文件及相關信息。

圖3　多媒體文件刪除

2　使用Iframe上傳、刪除文件的基本原理

2.1利用Iframe無刷新上傳文件的基本原理

基于Iframe內聯框架的異步多媒體文件上傳方案，就是利用Iframe這種內嵌的框架，可以在一個頁面中再加載其他頁面，也就是包含多個網頁，可執行多組并發程序。其基本原理為：在父頁面中增加一個Iframe，并設置Iframe網頁為不可見，以及它的路徑地址src屬性。將具體的文件上傳javascript函數寫在Iframe子網頁里面，將真實的文件上傳控件FileUpload拖放到Iframe子網頁中，并在Iframe子網頁的后臺服務端程序aspx.cs中編寫保存上傳文件到指定目錄的代碼。這樣當用戶點擊父頁面的文件上傳按鈕的時候，實際上是點擊Iframe子網頁內的文件上傳控件，當用戶選擇好所需上傳的文件之后，如果所選擇的文件不是視頻、圖片這樣的多媒體文件，那么系統就會提示用戶需要重新選擇上傳的文件且為多媒體文件，當所選的文件為多媒體文件的時候，父網頁與子網頁進行通信，通過調用Iframe子網頁的相關javascript函數提交Iframe子網頁表單，從而可以執行到子網頁頁面服務端aspx.cs的頁面加載方法，將上傳的多媒體文件以文件的形式保存到本地項目的指定目錄下。與此同時，由于Iframe是異步上傳文件，父網頁再次與子網頁Iframe進行通信，獲取上傳文件的文件名、全局唯一標識符GUID等相關信息，并通過調用WebService增加附件信息方法將數據傳遞到后臺數據庫中。數據庫通過執行增加附件存儲過程［9］即可將文件信息增添到對應的數據庫表項中。如圖4所示為利用基于Iframe的無刷新異步上傳文件的流程圖。

圖4　Iframe文件上傳流程圖

2.2利用Iframe刪除文件的基本原理

利用基于Iframe內聯框架的刪除文件的基本原理為：在Iframe子網頁中設置asp服務端按鈕和一個隱藏域標簽，且在父頁面也設置一個隱藏域標簽。隱藏域標簽主要用于頁面間的數據傳遞。當用戶需要刪除某個文件的時候，在執法報告管理父頁面點擊附件列表上相應文件信息的刪除按鈕，在按鈕觸發事件函數內首先將要刪除的文件的文件名賦給父頁面的隱藏域標簽，然后父頁面與子網頁Iframe進行通信，調用子網頁Iframe的callParent（）方法，獲得父頁面存儲文件名的隱藏域，并將該隱藏域的值賦給Iframe子網頁隱藏域，接著在父網頁刪除按鈕事件函數內調用子網頁Iframe的asp服務端按鈕的刪除文件函數［10］，該函數通過獲取子網頁Iframe隱藏域的文件名，遍歷存放有多媒體文件的文件夾，如果存在要刪除的文件名，即可刪除指定目錄下相應的文件。接著在父頁面刪除按鈕函數繼續調用WebService相應的刪除文件方法，將該文件的相關信息從數據庫中刪除。最后當刪除文件成功以后，根據執法報告的全局唯一標識符GUID重新從數據庫查詢該報告的所有文件信息。如圖5所示為利用基于Iframe的刪除文件的流程圖。

圖5　Iframe刪除文件流程圖

表1　附件基礎數據表的字段

3　文件上傳的數據庫存儲過程

本系統采用SQL Server 2008作為后臺數據庫工具來使用，文件上傳功能模塊屬于執法報告管理模塊，因此在已有的路政數據庫表jxlz140804下增加一個附件基礎數據表，上傳文件的相關信息存儲到數據庫的附件基礎數據表中［11］。執法報告管理模塊主要用到了附件基礎數據表、執法報告表。

附件基礎數據表主要用于存儲用戶增加上來的文件相關信息，它是根據執法報告的全局唯一標識號_guid來確定上傳的附件文件信息。而執法報告和附件文件是一對多的關系，也就是說一個執法報告可對應多個附件文件信息。具體的字段如表1所示。

執法報告表主要用于存儲執法現場發生的案件事故的記錄。

附件文件上傳的數據庫存儲過程包括查詢附件信息存儲過程、增加附件信息存儲過程、以及刪除附件信息存儲過程。

1）查詢附件信息存儲過程

根據附件基礎數據表LZ_FJ中的全局唯一標識號_guid和記錄有效性Effective，對附件文件信息進行查詢，查詢附件信息存儲過程代碼如下所示：

2）增加附件信息存儲過程

依據全局唯一標識號_guid和文件名name對附件文件信息進行添加，若附件基礎數據表LZ_FJ中已經存有所要添加的文件名name和全局唯一標識號_guid，則提示附件名稱已存在。當執行插入數據到附件基礎數據表的這條sql語句發生錯誤的時候，@@error就會返回不為0的錯誤號。@@rowcount返回上述語句受影響的行數，和@@error一樣的特性，每一條語句執行后都將被重置。若執行插入數據到附件基礎數據表的sql語句所受影響的行數不為1，那么在上述兩種情況下會提示添加附件失敗，當o_errcode為@@ IDENTITY，即獲取到上次插入的標識值，此時插入附件信息就會提示成功。增加附件信息存儲過程代碼如下所示：

3）刪除附件信息存儲過程

依據全局唯一標識號_guid和文件名name對附件文件信息進行刪除，當執行數據庫存儲過程的刪除附件文件信息的sql語句后，可以根據返回result的值在頁面進行相應的判斷，當返回的result的值為0，即提示刪除成功［12］。若在執行刪除附件文件信息的的sql語句時出現錯誤信息，即符合@@error不為0的條件，則返回的result的值不為0，即提示刪除失敗。刪除附件信息存儲過程代碼如下所示：

4　系統具體實現

4.1存儲文件至服務器相關實現

實現將上傳的文件保存到服務器指定目錄下這一功能是通過Iframe子網頁服務后端代碼來實現。實現這個功能主要涉及前端腳本以及后端C#代碼。

1）前端javascript相關代碼

4.2刪除文件相關實現

實現文件的刪除既要刪除Web服務器下指定目錄所保存的相應文件，也要刪除附件基礎數據表中對應的附件文件信息記錄。

1）前端javascript相關代碼

2）子網頁后端C#刪除文件實現代碼

4.3系統展示

用戶進入路政指揮調度管理系統登陸界面，輸入正確的用戶名和密碼，進入到網站主頁后，再點擊右側欄目的執法取證下的執法報告管理圖標［13］，即可進入到執法報告管理頁面，用戶輸入起始日期和截止日期后，點擊查詢按鈕即可查詢到在指定時間范圍內的執法報告記錄。選擇一條執法報告記錄，點擊修改執法報告按鈕，在彈出的對話框中選擇車輛信息、附件版面，然后在該版面中點擊上傳附件按鈕，即可看到上傳的圖片文件的預覽圖，并且視頻和圖片附件列表會顯示上傳附件之后的相關文件信息，如圖6所示。

圖6　文件上傳界面圖

此時可以看到上傳文件之后，附件列表增添了一項剛剛上傳的附件文件相關信息，如圖7所示的最下面的一條記錄。

圖7　附件文件信息界面圖

用戶點擊查看按鈕可以選擇查看該文件，如果是視頻文件，那么用戶可以瀏覽該視頻文件的具體內容，如果是圖片文件，用戶可以查看該圖片。當用戶不需要某個附件文件的時候，用戶可以點擊刪除按鈕即可刪除對應的文件信息，此時服務器指定目錄下對應該文件名的文件也會從該目錄下刪除。如圖8所示。

圖8　刪除附件文件界面圖

5　結束語

父網頁通信的相關知識的基礎上，設計和實現了一種基于Iframe內聯框架的文件上傳系統，能夠避開因安全策略導致的不能上傳文件的問題，并通過了大量的測試。該應用系統操作簡便、運行穩定，可方便地上傳附件文件到執法報告管理系統，可以隨時查看附件文件信息，當不需要某些文件的時候可以刪除冗余文件信息，為執法、管理人員提供了便捷、良好的服務。

［1］袁芳.基于ASP.NET的文件上傳模塊的設計與實現［J］.軟件，2014，35（7）:135-139.

［2］鄒于豐，梁霄波，以繪，等.基于ASP的文件上傳系統的設計與實現［J］.計算機時代，2009（12）:33-35.

［3］劉艷.Web表單設計技巧探析［J］.電腦知識與技術，2014（12）:2845-2846.

［4］陳善為.嵌入式Iframe的動態擴展及機理分析［J］.計算機與數字工程，2013（9）:1461-1463.

［5］石靜，劉欣亮.使用Iframe實現網頁之間數據的隱形傳送［J］.軟件導刊，2011，10（11）:141-142.

［6］李之杰.基于Web的環保遠程監控系統的設計與實現［D］.鄭州：鄭州大學，2014.

［7］沈立忠.基于B/S模式的航空站監控系統的設計與實現［D］.吉林：吉林大學，2014.

［8］曲冰.基于ASP.NET的學生綜合信息管理系統的設計與開發［D］.大慶：東北石油大學，2013.

［9］Whang K，Krishnamurthy R.Query optimization in a memory-resident domain relational calculus database system［J］. ACM Transactions on Database Systems，1990，15（1）:67-121.

［10］熊來紅，高健，汪皓鈺.COM技術和遺傳算法在無功優化軟件開發中的應用［J］.陜西電力，2011（12）:22-26，75.

［11］王文龍，張少博，陳海峰.一種試驗數據處理軟件設計［J］.火箭推進，2012（1）:76-80.

［12］施先旺，劉婷婷，李國良.采用有限狀態機實現控制指令的可靠檢測［J］.火箭推進，2011（5）:63-68.

［13］邱進.一種應用于多斷口光控真空斷路器的同步控制系統的設計與實現［J］.供用電，2015（5）:69-73.

在查閱大量Iframe異步文件上傳以及Iframe子網頁與

Asynchronous file upload based on Iframe technology

LUO Bin1，BA Ji-dong2

（1.Wuhan Research Institute of Post and Telecommunications，Wuhan 430065，China；2.Wuhan Yangtze Communications Technology Company Limited，Wuhan 430065，China）

File uploads are not supported by some low versions browsers due to the security policy.A solution based on the Inline-Frame to upload，delete files asynchronously and with some other functions is presented in this article.The pictures，audio/video and some other multimedia files are uploaded by using the solution，with the ability to generate a proper preview of the selected file without refreshing page.In the meantime，the file information will be transferred into the backstage database by WebService，the file can be stored in the form of file in the specified directory of local project through the server-side of Inline-Frame subpage.The selected file and its corresponding information can be viewed and/or deleted if necessary.The application result shows that the solution is effective to solve the problem of file uploading，deleting，and some other issues.

Inline-Framed；file upload；asynchronous；subpage

TN919

A

1674－6236（2016）12-0043-05

2015-07-04稿件編號：201507044

羅斌（1990—），男，湖北武漢人，碩士研究生。研究方向：Web研發、多媒體通信。