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

羅斌，巴繼東

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

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

羅斌1，巴繼東2

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

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

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

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

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

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

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

通過(guò)分析，執(zhí)法報(bào)告管理模塊下的文件上傳、刪除、查看等系統(tǒng)功能采用B/S［6-7］模式的三層架構(gòu)模型來(lái)進(jìn)行開(kāi)發(fā)，旨在達(dá)到分工明確、便于維護(hù)、可擴(kuò)展的目的。B/S模式下的三層架構(gòu)模型將應(yīng)用程序結(jié)構(gòu)劃分為三層獨(dú)立的部分，包括用戶表示層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問(wèn)層。表示層位于最上層，主要為用戶提供一個(gè)可與系統(tǒng)進(jìn)行交互的界面，它可以向業(yè)務(wù)邏輯層發(fā)送用戶的輸入?yún)?shù)，也可從業(yè)務(wù)邏輯層接受結(jié)果并顯示數(shù)據(jù)等。業(yè)務(wù)邏輯層在體系架構(gòu)中的位置很關(guān)鍵，它處于表示層與數(shù)據(jù)訪問(wèn)層中間，主要是從Web表示層接受請(qǐng)求，根據(jù)編碼的業(yè)務(wù)邏輯處理請(qǐng)求，從數(shù)據(jù)庫(kù)訪問(wèn)層獲取數(shù)據(jù)或?qū)?shù)據(jù)發(fā)送到數(shù)據(jù)訪問(wèn)層，將處理結(jié)果傳遞回Web表示層。數(shù)據(jù)訪問(wèn)層處于最下層，主要是直接對(duì)數(shù)據(jù)庫(kù)進(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所示，文件上傳過(guò)程是基于B/S架構(gòu)的，用戶通過(guò)電腦訪問(wèn)執(zhí)法報(bào)告管理（系統(tǒng)）的aspx網(wǎng)頁(yè)，點(diǎn)擊上傳文件按鈕，然后發(fā)出文件上傳請(qǐng)求，Web服務(wù)器接受用戶請(qǐng)求后，通過(guò)Iframe子網(wǎng)頁(yè)將上傳的多媒體的文件以文件形式存儲(chǔ)到本地項(xiàng)目的指定目錄下，與此同時(shí)，Web服務(wù)器再將上傳文件的文件名等相關(guān)信息傳遞到后臺(tái)數(shù)據(jù)庫(kù)中。數(shù)據(jù)庫(kù)返回結(jié)果到Web服務(wù)器，Web服務(wù)器返回響應(yīng)到客戶端瀏覽器，用戶可以從附件列表查看到所上傳的文件相關(guān)信息。

圖2　多媒體文件上傳

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

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

圖3　多媒體文件刪除

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

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

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

圖4　Iframe文件上傳流程圖

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

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

圖5　Iframe刪除文件流程圖

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

3　文件上傳的數(shù)據(jù)庫(kù)存儲(chǔ)過(guò)程

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

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

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

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

1）查詢附件信息存儲(chǔ)過(guò)程

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

2）增加附件信息存儲(chǔ)過(guò)程

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

3）刪除附件信息存儲(chǔ)過(guò)程

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

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

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

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

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

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

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

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

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

4.3系統(tǒng)展示

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

圖6　文件上傳界面圖

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

圖7　附件文件信息界面圖

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

圖8　刪除附件文件界面圖

5　結(jié)束語(yǔ)

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

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

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

［5］石靜，劉欣亮.使用Iframe實(shí)現(xiàn)網(wǎng)頁(yè)之間數(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ì)與開(kāi)發(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］熊來(lái)紅，高健，汪皓鈺.COM技術(shù)和遺傳算法在無(wú)功優(yōu)化軟件開(kāi)發(fā)中的應(yīng)用［J］.陜西電力，2011（12）:22-26，75.

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

［12］施先旺，劉婷婷，李國(guó)良.采用有限狀態(tài)機(jī)實(shí)現(xiàn)控制指令的可靠檢測(cè)［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)頁(yè)與

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稿件編號(hào)：201507044

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