實踐Html5的上傳文件

技術點：

1.經過input的change事件獲取文件信息：

onchange = function() {

  this.files

}

這個files屬性是htmlInputElement接口的屬性，只存在於現代瀏覽器中(ie10)

2.文件對象中的文件信息

https://developer.mozilla.org/zh-CN/docs/Web/API/File

主要是name,size,type這三個屬性

 

3.dom對象的classList屬性

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList

把屬性的className對象化，不用再像之前使用拼接字符串的方式操做。

 

4.使用FileReader異步讀取本地文件或文件對象

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

5.使用FormData新建傳遞到ajax的對象，能夠傳遞文件對象

 

總體流程：

1.上傳文件控件綁定change事件

2.經過change事件的觸發，得到inputDom的files屬性，也就是上傳的文件信息。

3.經過fileReader讀取file，得到用於展現的dataURl，這樣在上傳成功前能夠看到預覽圖片

4.經過var form = new FormData(); form.append("key", "value")的形式傳遞數據到後臺，這樣就把本地文件經過ajax上傳了。

5.後臺處理，能夠本身處理流，我用的是formidable控件。