技术点:
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控件。