基于Iframe內(nèi)聯(lián)框架的異步文件上傳與刪除

羅斌，巴繼東

（1.武漢郵電科學(xué)研究院湖北武漢430065；2.武漢長江通信智聯(lián)技術(shù)有限公司湖北武漢430065）

基于Iframe內(nèi)聯(lián)框架的異步文件上傳與刪除

羅斌1，巴繼東2

（1.武漢郵電科學(xué)研究院湖北武漢430065；2.武漢長江通信智聯(lián)技術(shù)有限公司湖北武漢430065）

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

內(nèi)聯(lián)框架；文件上傳；異步；子網(wǎng)頁

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

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

1　系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

1.1系統(tǒng)架構(gòu)原理

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

圖1　B/S三層架構(gòu)模型圖

1.2文件上傳結(jié)構(gòu)設(shè)計(jì)

基于Iframe內(nèi)聯(lián)框架的異步多媒體文件上傳結(jié)構(gòu)設(shè)計(jì)如圖2所示，文件上傳過程是基于B/S架構(gòu)的，用戶通過電腦訪問執(zhí)法報(bào)告管理（系統(tǒng)）的aspx網(wǎng)頁，點(diǎn)擊上傳文件按鈕，然后發(fā)出文件上傳請求，Web服務(wù)器接受用戶請求后，通過Iframe子網(wǎng)頁將上傳的多媒體的文件以文件形式存儲到本地項(xiàng)目的指定目錄下，與此同時，Web服務(wù)器再將上傳文件的文件名等相關(guān)信息傳遞到后臺數(shù)據(jù)庫中。數(shù)據(jù)庫返回結(jié)果到Web服務(wù)器，Web服務(wù)器返回響應(yīng)到客戶端瀏覽器，用戶可以從附件列表查看到所上傳的文件相關(guān)信息。

圖2　多媒體文件上傳

1.3文件刪除結(jié)構(gòu)設(shè)計(jì)

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

圖3　多媒體文件刪除

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

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

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

圖4　Iframe文件上傳流程圖

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

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

圖5　Iframe刪除文件流程圖

表1　附件基礎(chǔ)數(shù)據(jù)表的字段

3　文件上傳的數(shù)據(jù)庫存儲過程

本系統(tǒng)采用SQL Server 2008作為后臺數(shù)據(jù)庫工具來使用，文件上傳功能模塊屬于執(zhí)法報(bào)告管理模塊，因此在已有的路政數(shù)據(jù)庫表jxlz140804下增加一個附件基礎(chǔ)數(shù)據(jù)表，上傳文件的相關(guān)信息存儲到數(shù)據(jù)庫的附件基礎(chǔ)數(shù)據(jù)表中［11］。執(zhí)法報(bào)告管理模塊主要用到了附件基礎(chǔ)數(shù)據(jù)表、執(zhí)法報(bào)告表。

附件基礎(chǔ)數(shù)據(jù)表主要用于存儲用戶增加上來的文件相關(guān)信息，它是根據(jù)執(zhí)法報(bào)告的全局唯一標(biāo)識號_guid來確定上傳的附件文件信息。而執(zhí)法報(bào)告和附件文件是一對多的關(guān)系，也就是說一個執(zhí)法報(bào)告可對應(yīng)多個附件文件信息。具體的字段如表1所示。

執(zhí)法報(bào)告表主要用于存儲執(zhí)法現(xiàn)場發(fā)生的案件事故的記錄。

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

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

根據(jù)附件基礎(chǔ)數(shù)據(jù)表LZ_FJ中的全局唯一標(biāo)識號_guid和記錄有效性Effective，對附件文件信息進(jìn)行查詢，查詢附件信息存儲過程代碼如下所示：

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

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

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

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

4　系統(tǒng)具體實(shí)現(xiàn)

4.1存儲文件至服務(wù)器相關(guān)實(shí)現(xiàn)

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

1）前端javascript相關(guān)代碼

4.2刪除文件相關(guān)實(shí)現(xiàn)

實(shí)現(xiàn)文件的刪除既要刪除Web服務(wù)器下指定目錄所保存的相應(yīng)文件，也要刪除附件基礎(chǔ)數(shù)據(jù)表中對應(yīng)的附件文件信息記錄。

1）前端javascript相關(guān)代碼

2）子網(wǎng)頁后端C#刪除文件實(shí)現(xiàn)代碼

4.3系統(tǒng)展示

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

圖6　文件上傳界面圖

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

圖7　附件文件信息界面圖

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

圖8　刪除附件文件界面圖

5　結(jié)束語

父網(wǎng)頁通信的相關(guān)知識的基礎(chǔ)上，設(shè)計(jì)和實(shí)現(xiàn)了一種基于Iframe內(nèi)聯(lián)框架的文件上傳系統(tǒng)，能夠避開因安全策略導(dǎo)致的不能上傳文件的問題，并通過了大量的測試。該應(yīng)用系統(tǒng)操作簡便、運(yùn)行穩(wěn)定，可方便地上傳附件文件到執(zhí)法報(bào)告管理系統(tǒng)，可以隨時查看附件文件信息，當(dāng)不需要某些文件的時候可以刪除冗余文件信息，為執(zhí)法、管理人員提供了便捷、良好的服務(wù)。

［1］袁芳.基于ASP.NET的文件上傳模塊的設(shè)計(jì)與實(shí)現(xiàn)［J］.軟件，2014，35（7）:135-139.

［2］鄒于豐，梁霄波，以繪，等.基于ASP的文件上傳系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.計(jì)算機(jī)時代，2009（12）:33-35.

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

［4］陳善為.嵌入式Iframe的動態(tài)擴(kuò)展及機(jī)理分析［J］.計(jì)算機(jī)與數(shù)字工程，2013（9）:1461-1463.

［5］石靜，劉欣亮.使用Iframe實(shí)現(xiàn)網(wǎng)頁之間數(shù)據(jù)的隱形傳送［J］.軟件導(dǎo)刊，2011，10（11）:141-142.

［6］李之杰.基于Web的環(huán)保遠(yuǎn)程監(jiān)控系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［D］.鄭州：鄭州大學(xué)，2014.

［7］沈立忠.基于B/S模式的航空站監(jiān)控系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［D］.吉林：吉林大學(xué)，2014.

［8］曲冰.基于ASP.NET的學(xué)生綜合信息管理系統(tǒng)的設(shè)計(jì)與開發(fā)［D］.大慶：東北石油大學(xué)，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技術(shù)和遺傳算法在無功優(yōu)化軟件開發(fā)中的應(yīng)用［J］.陜西電力，2011（12）:22-26，75.

［11］王文龍，張少博，陳海峰.一種試驗(yàn)數(shù)據(jù)處理軟件設(shè)計(jì)［J］.火箭推進(jìn)，2012（1）:76-80.

［12］施先旺，劉婷婷，李國良.采用有限狀態(tài)機(jī)實(shí)現(xiàn)控制指令的可靠檢測［J］.火箭推進(jìn)，2011（5）:63-68.

［13］邱進(jìn).一種應(yīng)用于多斷口光控真空斷路器的同步控制系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.供用電，2015（5）:69-73.

在查閱大量Iframe異步文件上傳以及Iframe子網(wǎng)頁與

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研發(fā)、多媒體通信。