糜梅　熊棠

關(guān)鍵詞：Javascript；HTML5；FormData；AJAX；異步；文件上傳類

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）02-0072-03

2005年，Google在搜索web界面中推出了Google Suggest。Google Suggest使用AJAX創(chuàng)造出動態(tài)性極強(qiáng)的web界面：當(dāng)您在谷歌的搜索框輸入關(guān)鍵字時(shí)，JavaScript會把這些字符發(fā)送到服務(wù)器，然后服務(wù)器會返回一個(gè)搜索建議的列表。[1]其后，隨著Google Reader、Google Map、Gmail等一大批產(chǎn)品的流行，AJAX這種與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)迅速的流行起來。但是，AJAX一直沒有實(shí)現(xiàn)對文件對象的異步上傳，直到HTML5的出現(xiàn)。

1 FormData對象

在HTML5標(biāo)準(zhǔn)中，XMLHttpRequest Level 2添加了一個(gè)新的接口FormData。利用FormData對象，我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件，我們還可以使用XMLHttpRequest的send（）方法來異步的提交這個(gè)“表單”。比起普通的AJAX，使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。[2]

1.1 構(gòu)造

使用new方法構(gòu)造一個(gè)FormData實(shí)例：

var form = new FormData（[formElement]）；

參數(shù)formElement為可選，可以包含任何形式的表單控件，如一個(gè)文本框，或是一個(gè)表單對象。

1.2 append方法

使用append方法可以給當(dāng)前FormData對象實(shí)例添加一個(gè)鍵/值對：

form.append（name，value，[filename]）；

name表示一個(gè)字段名稱，value表示一個(gè)字段值。value可以是一個(gè)字符串，或者一個(gè)二進(jìn)制大對象或文件；如果給出的數(shù)據(jù)是其它類型比如整數(shù)型，會被自動轉(zhuǎn)換成字符串型[3]。當(dāng)value為一個(gè)二進(jìn)制大對象或文件時(shí)，可選參數(shù)filename將以字符串的形式發(fā)送給服務(wù)器。

1.3 delete方法

使用delete方法可以刪除當(dāng)前FormData對象實(shí)例的一個(gè)鍵/值對：

form.delete（name）；

1.4 get方法

使用get方法可以讀取當(dāng)前FormData對象實(shí)例對應(yīng)鍵的值：

var value = form.get（name）；

此外，還有以數(shù)組形式返回所有鍵/值對的getAll方法，檢查否是含有某鍵的has方法，和更新已有鍵/值對的set方法。delete、get、getAll、has、set方法僅支持Chrome、Opera瀏覽器的部分版本[4]。

2 表單

HTML5的文件API有一個(gè)FileList接口，可以通過e.dataTransfer.files拖拽事件傳遞的文件信息獲得本地文件列表，因此理論上可以使用任何DOM替代文本域作為拖拽區(qū)域。為了兼容不支持HTML5的瀏覽器，仍然需要使用文本域來訪問本地文件系統(tǒng)。

utf8和authenticity_token字段由框架自動生成，用來防止外部提交。file[file][]字段為文件域，支持多文件，文件列表為數(shù)組形式；文本域的樣式設(shè)置為同外部DIV同寬同高，且不透明度為0。圖1中FILE圖案的位置對應(yīng)為文本域的瀏覽按鈕，點(diǎn)擊可打開文件選擇對話框。

work方法以this.FileField文本域?yàn)槠瘘c(diǎn)查找父節(jié)點(diǎn)，通過迭代方式最終獲得表單對象。將表單對象所屬控件按鍵/值對的形式存入this.data以便于多次提交。this.uploader一般情況下應(yīng)等于表單的動作，也可以通過對實(shí)例屬性賦值進(jìn)行重設(shè)。在上傳開始前設(shè)置文本域?yàn)椴豢梢娨苑乐乖诙鄠€(gè)大文件上傳的過程中用戶再次操作文本域造成錯(cuò)誤。如果頁面上沒有進(jìn)度條，則將主動創(chuàng)建的進(jìn)度條置于文件域的位置，如圖4所示，這樣不會因?yàn)樾马撁嬖氐募尤朐斐身撁孀冃?。up方法以異步方式上傳數(shù)據(jù)，需用到FormData對象；IE6等不支持HTML5的瀏覽器會運(yùn)行錯(cuò)誤，因此使用try{}catch（e）{}方法進(jìn)行錯(cuò)誤控制，使IE6等瀏覽器運(yùn)行同步提交表單動作，即form.submit（）。

work方法的參數(shù)有3個(gè)，succFunc、errFunc和doneFunc。succFunc是單個(gè)文件上傳成功后調(diào)用的方法，errFunc是出現(xiàn)異常時(shí)調(diào)用的方法，doneFunc是所有文件上傳完成后調(diào)用的方法。這3個(gè)方法都將作為參數(shù)傳遞給up方法。調(diào)用方法為：

up（succFunc，errFunc，doneFunc，this.FileField，this.count，up，this.extension，this.data，this.uploader，this.progressBar，this.tip）；

3.2.2 up方法

up方法執(zhí)行一個(gè)異步上傳任務(wù)，包括提交表單，上傳文件，顯示進(jìn)度及信息，按照上傳結(jié)果及計(jì)數(shù)器決定調(diào)用方法等。

當(dāng)文件域的multiple屬性值為“multiple”時(shí)，文件列表以數(shù)組形式存在，訪問方法為var fileObj=this.FileField.files[file_index]。fileObj為當(dāng)前文件對象，file_index為計(jì)數(shù)器的當(dāng)前值。fileObj.name為當(dāng)前文件對象的文件名，使用正則表達(dá)式/[^＼.]+$/可以得到文件的后綴名ext。將ext與this.extension比較就可以知道當(dāng)前文件的類型是否合法。當(dāng)然，前端限制總是可以繞過的，只能作為一種用戶體驗(yàn)優(yōu)化手段；必須在后端對文件類型的合法性進(jìn)行嚴(yán)格的檢驗(yàn)。如果文件非法，啟動異常處理程序，否則創(chuàng)建FormData實(shí)例form，并使用form.append方法將this.data中的數(shù)據(jù)添加到form中，添加時(shí)需要區(qū)分this.data中的數(shù)據(jù)是數(shù)組類型還是對象：

同樣的方法將當(dāng)前文件對象也添加進(jìn)form，form.append（this.filefield.name，fileObj）。創(chuàng)建XMLHttpRequest實(shí)例carrier并上傳form對象的方法與一般的AJAX處理過程相同，不再贅述。Carrier的upload事件觸發(fā)添加事件監(jiān)聽，事件類型為"progress"，事件處理方法為progressFunction。Carrier上傳結(jié)束后計(jì)數(shù)器加1。異步上傳網(wǎng)絡(luò)異常時(shí)啟動異常處理程序，否則調(diào)用succFunc處理服務(wù)器返回結(jié)果；如果服務(wù)器返回的數(shù)據(jù)表明上傳不成功，則啟動異常處理程序，否則比較計(jì)數(shù)器與文件域中文件列表數(shù)；如果計(jì)數(shù)器小于文件數(shù)，則迭代調(diào)用up方法；如果計(jì)數(shù)器等于于文件數(shù)，則表明文件上傳完畢，調(diào)用doneFunc方法。

up方法的參數(shù)有succFunc，errFunc，doneFunc，filefield，file_index，next_func，extension，data，uploader，progressBar和tip。next_func為檢測到還有文件未上傳時(shí)執(zhí)行的方法，即up方法本身。其余參數(shù)文中已有說明。這些參數(shù)在迭代時(shí)將傳遞給next_func作為參數(shù)。

3.2.3 progressFunction方法

4 異常處理

異常處理方法不屬于drawUp類的方法，根據(jù)實(shí)際需要另外定義，作為參數(shù)傳遞給drawUp類的對象方法work。定義方法error為出現(xiàn)異常時(shí)的調(diào)用方法。error需要完成兩個(gè)工作：1、根據(jù)實(shí)際需要完成對錯(cuò)誤的處理；2、決定是否進(jìn)入下一次上傳。此處省略處理錯(cuò)誤的代碼，修改第2節(jié)的HTML5Uploader（）腳本為：

error的參數(shù)result是XMLHttpRequest實(shí)例carrier的運(yùn)行狀態(tài)carrier.status或返回結(jié)果carrier.responseText。error對這個(gè)值進(jìn)行類型分析或文本分析，然后執(zhí)行具體的錯(cuò)誤處理流程，此處不再贅述。

5 結(jié)束語

本文構(gòu)建的文件上傳類能夠在支持HTML5的瀏覽器中實(shí)現(xiàn)拖拽多個(gè)文件、識別文件類型、異步上傳文件、顯示上傳進(jìn)度、上傳后處理等功能；對于不兼容HTML5的瀏覽器能夠?qū)崿F(xiàn)傳統(tǒng)的同步方式上傳，實(shí)現(xiàn)了設(shè)計(jì)目標(biāo)。

參考文獻(xiàn)：

[1] W3School. AJAX 簡介[EB/OL]. [2015-05-22]. http：//www.w3school.com.cn/ajax/ajax_intro.asp.

[2] ziyunfei TooBug teoli. FormData[EB/OL].（2015-02）[2015-05-22].https：//developer.mozilla.org/zh-CN/docs/Web/API/FormData.

[4] Grissess cpigat cgack kscarfone Jeremie premjoy saneyuki_s Kabe Sicking ernestd mkato Sheppy ziyunfei evilpie teoli Yanmorin mattflaschen ethertank chrisdavidmills Callahad leachlife4 philoyche. FormData [EB/OL].（2015-04）[2015-05-22]. https：//developer.mozilla.org/en-US/docs/Web/API/FormData.