基于HTML5 的文件上傳

最近，在自己的三-豐-云-免-費(fèi)-主-機(jī)上部署了一個web在線圖片上傳的應(yīng)用，用了好幾個前端 的上傳組件，都不理想，有鑒于目前支持HTML5的瀏覽器已經(jīng)是主流，果斷拋棄IE6這個老古董，使用HTML5 的文件上傳功能。Html5 解決了上傳文件的同時顯示文件上傳進(jìn)度的老問題?，F(xiàn)在大部分的網(wǎng)站用Flash去實(shí)現(xiàn)這一功能，還有一些網(wǎng)站繼續(xù)采用Html <form>with enctype=multipart/form-data，但是需要修改服務(wù)器端可用才能顯示給用戶文件上傳的進(jìn)度。本質(zhì)上你需要做的工作是在服務(wù)器端接收一個文件時，你發(fā)送給它一個字節(jié)流，所以你需要知道你已經(jīng)接收到多少字節(jié)并以某種方式傳達(dá)這些信息給客戶端瀏覽器，在這個過程一直在不斷的進(jìn)行文件的上傳。這種方式運(yùn)行的非常好，不像Flash上傳那這樣充滿了問題(特別是處理大文件上傳的時候)，然而這種方法是相當(dāng)復(fù)雜的并且聽起來不容易理解，因?yàn)槟惚举|(zhì)上是接管了整個服務(wù)器端的處理（獲取字節(jié)流的時候）同時包括了在服務(wù)器端實(shí)現(xiàn)multipart/form-data協(xié)議，伴隨一系列的其他事情。

使用Html5 上傳文件
XMLHttpRequest 在Html5 規(guī)范中已經(jīng)有全新的變化，規(guī)定了XMLHttpRequest Level 2規(guī)范（目前最新版本）包含下列新的特性：

1. 處理字節(jié)流，例如作為上傳或者下載的File，Blob，F(xiàn)ormData對象
2. 上傳或者下載中的進(jìn)度事件
3. 跨站點(diǎn)請求
4. 允許創(chuàng)建匿名請求
5. 可以設(shè)置請求超時

在這篇文章中我們將能夠更清楚的看到#1和#2兩個特性。通常，上傳文件用XMLHttpRequest并且提供上傳進(jìn)度信息給最終的用戶，需要注意的是這種方式解決了不需要服務(wù)器端做任何改變，至少是目前處理multipart/form-data協(xié)議。所以服務(wù)器端的處理邏輯保留不變，這使得開發(fā)者適應(yīng)這種技術(shù)相當(dāng)容易。

注意：上面的圖片中，信息提示區(qū)域是提供給用戶的：

1. 當(dāng)前選中文件的信息
2. 上傳完成多少的百分比進(jìn)度條
3. 上傳速度或者上傳帶寬
4. 距離上傳完成大概還有多長時間
5. 已上傳文件大小
   服務(wù)器端的響應(yīng)
   上面第6項(xiàng)或許看起來不重要，但事實(shí)上是相當(dāng)重要的。因?yàn)槲覀冇肵MLHttpRequest，上傳發(fā)生在后臺，頁面沒有發(fā)生跳轉(zhuǎn)等任何變化，所以對于你用它處理其他一些事情來說是一個非常好的特性。

Html5 Progress Event
對于Html5 Progress Events規(guī)范，Html5 Progess Events提供了下列與本次討論相關(guān)的信息

total - 總的字節(jié)數(shù)
loaded - 到目前為止上傳的字節(jié)數(shù)
lengthComputable - 可計算的已上傳字節(jié)
請注意到我們需要用兩個信息去計算要顯示給用戶的其他所有信息。要計算出來其他的信息通過上面我們得到信息是相當(dāng)容易的，但是那需要一些額外的代碼并且創(chuàng)建一個定時器。

Html5 Progress Event 應(yīng)該是什么
考慮到有一部分人想更好的提供給用戶所有的信息，所以Html5 Progress Event應(yīng)該更好的滿足需要，因?yàn)樗o瀏覽器供應(yīng)商提供這些額外信息是相當(dāng)簡單的，所以建議progress event應(yīng)該修改成如下：

total - 總的字節(jié)數(shù)
loaded - 到目前為止上傳的字節(jié)數(shù)
lengthComputable - 可計算的已上傳字節(jié)
transferSpeed long類型
timeRemaining JavaScript 日期對象
Html5 上傳 用XMLHttpRequest
瀏覽器支持情況
支持這一特性的瀏覽器最低版本

Firefox 4.0 beta 6
Chrome 6
Safari 5.02
IE 9 Beta and Opera 10.62 不支持這一特性