中文前端UI架構Kit（八）無外掛程式非同步檔案上傳組件源碼解析

號外：kitjs官方討論QQ群建立了，QQ群號88093625，歡迎大家加入，討論前端相關話題

上一篇介紹了上傳組件的用法，以及api，這一篇，我們通過程式碼分析，從原理上給大家做下講解

demo地址:http://xueduany.github.com/KitJs/KitJs/index.html#upload

(一)Dom結構

我們首先看下上傳按鈕的dom結構

我們可以比較清楚看到在一層層div裡面，嵌套了一個form元素input file，並且這個input file的面積足夠大到覆蓋外面的div通過Css渲染的按鈕。這樣點擊了外面的div做的按鈕，等於點擊到input file，這樣就能通過input file開啟檔案選擇了。同理，圖片上傳的預覽也是同理

*可能有童鞋會問，input file不是有顏色的嗎，ok，我們把他設定為透明就不會顯示出來了，同時他的dom位置還在。

（二）選擇檔案上傳

首先綁定input file的change事件，當選中檔案之後，觸發上傳事件

取到input.files開始上傳

建立ajax連結，用post方式上傳檔案內容，在request頭設定fileName

content-type設定為Content-Type", "application/octet-stream"

上傳程序呼叫onprogress方法，顯示進度條

 

對於ie不支援這種上傳方式，改為

建立iframe，在iframe建立form，並且利用表單提交的方式上傳

 

（三）拖拽上傳

拖拽上傳，只支援進階瀏覽器，

 

關鍵點在於，瀏覽器會在drag和drop事件，把檔案放入event對象的dataTransfer屬性裡面。