劉耀欽

（鄖陽師范高等?？茖W校計算機科學系，湖北十堰442000）

利用HTML5拖放技術(shù)實現(xiàn)多文件異步上傳

劉耀欽

（鄖陽師范高等?？茖W校計算機科學系，湖北十堰442000）

在傳統(tǒng)的Web應用中實現(xiàn)本地文件的跨瀏覽器應用，不僅要編寫大量冗余代碼，而且很難獲取良好的用戶體驗。HTML5利用拖放技術(shù)將本地文件拖放至瀏覽器，通過File API的dataTransfer對象獲取文件屬性，然后將符合條件的文件添加至由FormData生成的模擬表單中，最后由Ajax的XMLHttpRequest將表單內(nèi)容提交給服務器，進而實現(xiàn)本地文件的拖放和異步上傳。這極大地提升了用戶體驗，減輕了服務器負載?；谕戏偶夹g(shù)的文件異步上傳是Web應用的一種新型技術(shù)形式，有較良好的應用前景。

HTML5；拖放；異步；Ajax；File API

引言

在Web應用系統(tǒng)中，若要獲得本地文件句柄，需要通過打開對話框找到文件位置，然后獲取文件路徑，若需要上傳的文件有多個，就需要多次重復操作，過程不僅繁瑣，而且無法獲得良好的用戶體驗。HTML5作為Web前端開發(fā)的新標準超文本標記語言，不僅簡化了傳統(tǒng)HTML標簽語法，而且提供了諸如智能表單、離線緩存、Canvas繪圖、拖放等核心技術(shù)和相應的API，相比以前版本的HTML，HTML5極大地改善和增強了用戶體驗和開發(fā)功能［1］，降低了瀏覽器對資源的占有率以及對插件的依賴［2］，解決了HTML4在Web應用功能上的欠缺［3］。其中的拖放技術(shù)和File API既實現(xiàn)了同一Web頁面內(nèi)部不同對象之間的拖放，又建立起了本地文件與Web頁面之間的關聯(lián)，使得多文件直接拖放上傳成為可能。

Ajax的Xm lHttpRequest［4］對象具有對HTTP協(xié)議的完全訪問能力，包括對POST、HEAD以及GET等請求處理的能力，用來實現(xiàn)發(fā)送和接收HTTP請求與響應信息，經(jīng)由Xm lHttpRequest對象發(fā)送的請求不需要Web頁面存在或返回一個form表單元素。文件的異步上傳就是通過使用該對象直接與Web服務器進行通信［5］，在頁面不重載或不轉(zhuǎn)向的情況下將文件上傳請求發(fā)送至服務器并返回處理結(jié)果，進而實現(xiàn)文件異步傳輸。相對傳統(tǒng)的瀏覽同步提交，文件拖拽的異步傳輸方式既提升了用戶體驗，又減輕了服務器負載，是HTML5環(huán)境下Web應用的一種新型技術(shù)形式，也是目前本地文件Web傳輸瓶頸的解決途徑之一，有著較為廣闊的應用前景。

1 原理和架構(gòu)

1．1 原理

在HTML5以前，要實現(xiàn)Web對象的拖放操作不僅需要逐一實現(xiàn)mouseDown、mouseMove、mouseUp等一系列鼠標事件，而且還需要編寫大量JS代碼，編寫完的應用程序體積龐大、代碼冗余［6］，更為主要的是這些冗余的代碼僅僅能實現(xiàn)瀏覽器內(nèi)部對象的相互拖放。HTML5給文件的跨應用拖放提供了快速便捷的實現(xiàn)方式，只需要給被拖放元素添加“draggable＝true”屬性值即可，一個標記有該屬性值的元素允許用戶將其拖放至其他位置，同時也允許用戶將其他對象拖放至自身區(qū)域內(nèi)部，同時觸發(fā)相應事件，用戶可以從這些觸發(fā)的事件中準確及時地獲取元素從拖放開始至放下鼠標過程的各種狀態(tài)和數(shù)據(jù)。圖1反映了元素A在被拖放過程各事件響應流程。

圖1拖放過程各事件響應流程

在具體實現(xiàn)Web元素的拖放操作時，除了要逐一實現(xiàn)圖1所示的各種相關拖放事件外，還要使用prevent-Default（）［7］方法通知瀏覽器不要執(zhí)行與事件關聯(lián)的默認動作。而很多HTML標簽通常會有一個默認的動作，比如：

＜a id＝“l(fā)ink”href＝“http：／／www.mypido.cn”＞百度＜／a＞

默認情況下，鼠標點擊了這個鏈接即會打開百度首頁，若在頁面加入如下JS代碼后就不會執(zhí)行打開鏈接這個默認動作了：

var link1＝document.getElementById（“l(fā)ink”）；／／獲取id為link的元素

link1.onclick＝function（e）｛／／單擊link1元素時觸發(fā)

e.preventDefault（）；／／阻止或取消了link1元素的默認動作｝

現(xiàn)在假定Web頁中有red、blue、yellow三個div，根據(jù)如下步驟即可實現(xiàn)將blue拖放至red、yellow任意一個div中。

Step 1：獲取三個div

var yellow＝document．getElementById（“yellow”）；／／獲取id為yellow的元素

var blue＝document.getElementById（“blue”）；／／獲取id為blue的元素

var red＝document.getElementById（“red”）；／／獲取id為red的元素

Step 2：設置手動blue時的數(shù)據(jù)

blue.ondragstart＝function（e）｛／／當拖動開始時觸發(fā)，產(chǎn)生一個事件對象e

e.dataTransfer.setData（“blueDiv”，“blue”）；／／設置blueDiv的值為blue元素｝

dataTransfer是事件對象的一個屬性，用于從被拖拽元素向目標元素傳遞字符串格式的數(shù)據(jù)，有setData（）和getData（）兩種方法，后者用于獲取前者保存的數(shù)據(jù)。

Step 3：阻止yellow和red兩元素默認事件

yellow.ondragover＝function（e）｛／／當有元素拖動至yellow元素上方時觸發(fā)

e.preventDefault（）；｝red.ondragover＝function（e）｛／／當有元素拖動至red元素上方時觸發(fā)

e.preventDefault（）；｝

Step 4：目標元素接受被拖動元素時

yellow.ondrop＝addNewTag；／／當yellow完全接受被拖動元素blue時觸發(fā)addNewTag

red.ondrop＝addNewTag；／／當red完全接受被拖動元素blue時觸發(fā)addNewTag

function addNewTag（e）｛

var recDiv＝document.getElementById（e.dataTransfer.getData（“blueDiv”））；／／獲取之前保存的blueDiv數(shù)據(jù)

e.target.appendChild（recDiv）；／／在當前元素內(nèi)部添加新元素recDiv｝

1．2 架構(gòu)

HTML5實現(xiàn)了本地文件的瀏覽器端應用，實現(xiàn)了Web應用程序集成的最終目標。接下來就需要在瀏覽器端通過JS加載和解析拖放來的文件，然后使用Ajax的XMLHttpRequest對象將文件異步傳輸至服務器。圖2描述了多圖片文件異步上傳架構(gòu)。

圖2異步上傳架構(gòu)

2 dataTransfer對象

在較早以前的Web時代，Web應用中的本地文件訪問功能需要借助flash、silverlight［8］、ActiveX［9］等特定插件技術(shù)才能實現(xiàn)，例如，我們非常熟悉的IE瀏覽器就需要借助ActiveX控件才能訪問本地文件。使用了這些特定技術(shù)的Web應用的獨立性和通用性都較差，而且很難實現(xiàn)跨平臺、跨應用的統(tǒng)一表現(xiàn)。HTML5的File API提供了一套完整的文件操作標準，包括Web應用客戶端表現(xiàn)和文件操作對象的應用程序接口，使得基于Web應用的文件讀寫任務變得易為輕松。其中dataTransfer對象用于傳輸拖拽過程中的文件信息，表1和表2列出了其常用的屬性和方法。

表1 dataTransfer對象主要方法

表2 dataTransfer對象主要屬性

在文件拖拽過程中，可以通過dataTransfer對象來傳輸文件數(shù)量、類型、大小等數(shù)據(jù)，以供拖拽操作結(jié)束后對這些數(shù)據(jù)進行判斷、顯示等操作。下面程序以上傳多張本地圖片文件為例詳細描述了拖放判斷的過程。

var picContainer＝document.getElementById（′pic￣container′）；／／獲取顯示圖片的容器DIV

picContainer.addEventListener（“drop”，function（e）｛／／給容器添加拖拽結(jié)束后事件監(jiān)聽

e．preventDefault（）；／／取消默認行為

var fileList＝e.dataTransfer.files；／／獲取傳輸?shù)膱D片文件列表

var n＝fileList.length；／／獲取圖片文件數(shù)量

for（i＝0；i＜n；i＋＋）｛／／判斷圖片大小及格式

if（fileList［i］.size＞1024*1000）error＋＝′第′＋（i＋1）＋′個圖片體積過大＼n′；if（?。痠mage／i.test（fileList［i］. type））error＋＝′第′＋（i＋1）＋′個不是圖片格式＼n′；｝

if（error）｛／／如果有不符合條件的圖片，則顯示錯誤信息，并終止程序

alert（error）；return false；｝

for（i＝0；i＜n；i＋＋）｛／／顯示拖拽來的圖片

var img＝window.webkitURL.createObjectURL（fileList［i］）；／／創(chuàng)建第i＋1個圖片的url

var str＝“＜img src＝′”＋img＋“′＞＜p＞圖片名稱：”＋fileList［i］.name＋“＜／p＞＜p＞大?。骸保玀ath.floor（（fileList［i］.size）／1024）＋“KB＜／p＞”；｝

MYM（“＃pic￣container”）.html（str）；／／將str字符串放置在id為pic￣container容器內(nèi)

3 異步處理

Web應用的異步處理是指不向服務器提交完整頁面的情況下實現(xiàn)Web頁面數(shù)據(jù)的局部更新和提交。Ajax可以構(gòu)建更為動態(tài)和響應更靈敏的Web應用程序。其中的XMLHttpRequest對象提供了對HTTP協(xié)議的完整訪問，包括對POST和GET請求的訪問能力［5］，異步或同步的返回Web服務器的響應，它不局限于對XML的操作，可以接收任何形式的數(shù)據(jù)，是基于Ajax的Web應用構(gòu)架的核心組件。異步傳輸其實就相當于在客戶端和服務器之間架設了一個中間層，可以把同步傳輸過程中的部分請求負擔分攤給客戶端處理，減輕了服務器的承載壓力，縮短了響應時間，提高了程序的可操作性，增強了界面的友好性與直觀性［10］。

XMLHttpRequest對象中用于異步傳輸?shù)暮诵姆椒ㄓ衞pen（）和send（），分別用于初始化和發(fā)送HTTP參數(shù)和請求。open（）方法的具體結(jié)構(gòu)如圖3所示。

圖3 open（）方法結(jié)構(gòu)

如果open（）方法指定了POST或GET請求方式，send（）方法要指定具體的請求體。比如，要以POST方式提交上傳的文件，就需要將文件所在的表單內(nèi)容formData作為請求體，然后再send（formData）。對于拖拽來的文件，可以通過使用FromData對象的append（）方法將其逐一添加至動態(tài)模擬的表單控件中，即formData.append（“files［］”，e.dataTransfer.files［i］）。以下程序段將第2章中拖拽來的圖片文件異步上傳至服務器［11］。

xhr＝new XMLHttpRequest（）；／／生成XMLHttpRequest對象的一個實例

xhr.open（“post”，“／upload.php”，true）；／／以post方式異步打開upload.php文件，該文件存儲于服務器，用于處理客戶端提交的表單數(shù)據(jù)

var formData＝new FormData（）；／／生成FormData對象的一個實例來模擬表單

for（i＝0；i＜n；i＋＋）｛／／將拖拽來的文件逐一添加至formData中

formData.append（“myfiles［］”，fileList［i］）；

｝

xhr.send（formData）；／／發(fā)送表單數(shù)據(jù)

4 結(jié)論

HTML5的拖放技術(shù)不僅實現(xiàn)了頁面內(nèi)元素的相互拖拽，而且使得本地文件直接拖拽至瀏覽器成為可能。當文件拖拽操作結(jié)束時觸發(fā)目標區(qū)域的ondrop事件，進而通過使用HTML5的File API中dataTransfer對象獲取拖拽文件的name／size／type等屬性，并將符合條件的文件顯示在目標區(qū)域，同時逐一將這些文件添加在由FormData生成的模擬表單中，最后由XMLHttpRequest對象異步上傳到服務器。相比傳統(tǒng)方法，基于HTML5的拖放技術(shù)具有以下3個優(yōu)點：

（1）Web前端響應較快：基于客戶端主機的判斷驗證減少了服務器驗證返回結(jié)果的響應過程。

（2）容錯能力較強：Ajax使用異步交互技術(shù)，提高了網(wǎng)頁的連續(xù)性和響應速度［12］，即使進程中斷也不會導致系統(tǒng)崩潰。

（3）用戶體驗較良好：減少了繁瑣的操作過程，提高了傳輸效率，降低了用戶等待時間。

盡管HTML5新技術(shù)具有較強的移植性和跨平臺運行性，有效提高了程序可用性，但是由于目前瀏覽器技術(shù)的兼容性和支持性不夠完善，再加上缺少一種統(tǒng)一的數(shù)據(jù)描述標準，使得這些新技術(shù)還不能較好的共享通用。然而，隨著規(guī)范的逐步完善，HTML5必將成為移動互聯(lián)網(wǎng)領域的主宰者，帶來更加豐富的網(wǎng)絡應用。

［1］陶國榮.HTML5實戰(zhàn)［M］.北京：機械工業(yè)出版社，2011.

［2］劉華星，楊庚.HTML5下一代Web開發(fā)標準研究［J］.計算機技術(shù)與發(fā)展，2011，21（8）：54-58+62.

［3］童麗霞，何加銘，陳懇，等.基于HTML5技術(shù)的W idget引擎內(nèi)容緩存模型及實現(xiàn)［J］.計算機應用研究，2011，28（12）：4625-4628.

［4］Network Working Group.Hypertext Transfer Protocol-HTTP/1.1［EB/OL］.（2004-09-01）［2014-08-16］.http：// www.w3.org/Protocols/rfc2616/rfc2616.htm l

［5］呂國勇，史祥龍.基于嵌入式Linux和A jax技術(shù)的Web異步交互設計［J］.計算機應用，2013，33（S1）：247-251.

［6］鄒夢麗，劉小勇.基于A jax技術(shù)創(chuàng)建的異步方法應用研究［J］.計算機時代，2014（3）：33-35.

［7］劉華煜，黃紹龍.通過HTML5的拖放簡化網(wǎng)站的文件管理［J］.洛陽師范學院學報，2014，33（5）：72-73.

［8］譚淇.基于WCF服務框架與Silverligh的Web應用研究［J］.計算機與現(xiàn)代化，2011（1）：79-81.

［9］楊丁寧，肖暉，張玉清.基于Fuzzing的ActiveX控件漏洞挖掘技術(shù)研究［J］.計算機研究與發(fā)展，2012，49（7）：1525-1532.

［10］戴維，蔣玉芳.基于A jax技術(shù)實現(xiàn)Web異步樹的應用研究［J］.計算機與現(xiàn)代化，2011（2）：148-149，153.

［11］郭兆良.B/S架構(gòu)Web程序中A jax異步傳輸技術(shù)的應用研究［J］.電腦與信息技術(shù)，2013，21（6）：41-43.

［12］屈展，李嬋.JSON在A jax數(shù)據(jù)交換中的應用研究［J］.西安石油大學學報：自然科學版，2011，26（1）：95-98.

Realizing Asynchronous Up loading of Multip le Files by Using HTML5 Drag and Drop Technology

LIU Yaoqin
（Department of Computer Science，Yunyang Teachers'College，Shiyan 442000，China）

In traditionalWeb applications，to realize the trans-browser application of local files not only need to write a lot of redundant code but also can not obtain good user experience.The local file is dragged and dropped to the browser by using the HTML5 drags and drops technology，the file attribution is obtained through the data Transfer object of File API，and then the eligible files are added to the analog form generated by FormData，in the end，the content in the form is submitted to the server by using the XMLHttpRequest of Ajax.Thus the dragging，dropping and the asynchronous uploading of the local files are realized，which extremely increases the user experience and decreases the overloading of the server.Asynchronous uploading of Files based upon the drag and drop technology is a new technological form ofweb application which has a good usage prospect.

HTML5；drag and drop；asynchronous；Ajax；File API

TP311

A

1673-1549（2015）01-0017-05

10．11863／j．suse．2015．01．05

2014-12-05

鄖陽師范高等?？茖W校年重點科研項目（2014A01）

劉耀欽（1980-），男，河南禹州人，講師，碩士，主要從事信息安全及Web應用方面的研究，（E-mail）22556099＠qq.com