從效果圖可以看到，向伺服器上傳了一個mp4檔案，并在最下方顯示目前上傳進度。
那麼接下來我們就來探讨下具體實作：
首先，我們來分析下進度條的結構：
1. 需要一個背景，background
2. 需要一個目前進度值，value
3. 需要一個前景，foreground，根據目前進度值，繪制前景，蓋過背景
結構就這麼簡單，那麼接下來就是具體的實作了，看碼：
我們定義了一個名字為progress的矢量對象，矢量對象由兩部分組成，一個是背景，一個是前景。
繪制背景采用了資料綁定的方式，綁定了data的background屬性；繪制前景則采用自定義類型的方法繪制，是setCompType()方法的一種縮寫，繪制是根據data中的value值計算繪制寬度。
矢量的大體設計已經完成，那麼我們把他用起來，看看效果如何。
那麼接下來我們來模拟檔案上傳進度，讓進度條動起來。
我們通過setTimeout()方法不斷設定node的value值，但是，代碼運作起來你會發現，進度條根本沒有在動，一緻處于初始狀态，當我們縮放graphView時，可以看到進度條在改變，這是為什麼呢？其實原因很簡單，我們在修改value值時，并沒有通知graphView要更新，是以進度條并不會因為node的value值改變而有所改變，那麼我們該如何通知graphView更新呢？方法很簡單，在修改node的value值後，派發一個propertyChange事件就可以了，在建立node代碼後添加如下代碼：
代碼中，通過fp()方法來派發propertyChange事件，如此，進度條就可以正常工作，随着node的value的變化而變化，效果圖如下：
但是還有一點不足，進度條雖然在跑了，但是我們還是不知道目前進度值是多少，隻能通過進度條的比重來大緻估計目前進度值，我們能否在進度條上添加一個文本，用來顯示目前進度值呢，答案是肯定的，我們隻需要在矢量的comps中添加如下代碼就可以：
代碼中同樣适用了綁定，綁定node目前的value值，具體的效果圖如下：
1. 首先，我們需要建立一個揮之圓角矩形的方法：
2. 采用自定義類型的方法，調用roundRect()方法，繪制一個圓角矩形區域，然後再調用clip()方法，截掉圓角矩形區域外部分。有一點需要注意，clip()方法截取的内容隻對調用該方法後繪制的内容有效，調用該方法之前繪制的内容并不會被截掉。是以以下代碼必須放在繪制背景的代碼前。
看下效果如何
至此，進度條的設計就結束了，那麼接下來就來看下進度條如何與檔案上傳結合起來：
2. 其次，我們需要設計一個檔案上傳的表單：
如此，基于HT for Web自定義類實作HTML5檔案上傳進度條的頁面設計及代碼設計全部完成，由于篇幅的關系，在fromidable方面講得比較少，還望見諒，下面我講附上完整的代碼，有興趣的同學可以下載下傳下來研究研究。
<a href="http://dl.iteye.com/topics/download/dc98c05d-bcc2-3214-841a-e2ec1b9ececa" target="_blank">點選下載下傳源碼</a>