实践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控件。