文件API和XHR2

2017-06-11 本文已影响0人细雨衔雪

文件API

用来把文件读入内存，并且读取文件中的数据，FileReader接口提供了一个异步的Api
方法
- readAsBinaryString(file),将文件读取为二进制编码
- readAsText(file),将文件读取为文本,读取纯文本的时候使用。
- readAsDataURL(file),将文件读取为DataURL
- abort（none），终端读取操作
属性
- errorDOMError在读取文件时发生的错误
- readState 表明FileReader对象当前的状态. 值为State constants中的一个。只读 (EMPTY 0 还没有加载任何数据;LOADING 1 数据正在被加载;DONE 2 已完成全部的读取请求.)
- result 读取到的文件内容，这个属性只在读取操作完成之后才有效，并且数据的格式取决于读取操作是由哪个方法发起的。只读
事件
- onabort当读取操作被终止时调用
- onerror 当读取操作发生错误时调用
- onload 当读取操作成功完成时调用
- onloadend 当读取操作完成时调用，不管是成功还是失败，该处理程序在onload或onerror之后调用
- onloadstart 将读取操作将要开始之前调用
- onprogress 在读取数据过程中周期性调用

FormData
- 相比ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件
- 构造函数 new FormData(form),参数form（可选）一个HTML表单元素，可以包含任何形式的表单控件，包括文件输入框
- 方法 append(DOMString name, Blob value[, optional DOMString filename]);
属性
- readyState 请求响应状态
- status HTTP状态 404/200/503/403/304
- responseText 响应内容
- timeout 超时时间 xhr2
事件
- readystatechagne
- load 请求成功完成时触发 XHR2
- progress 进度事件下载重复触发大约50ms触发一次 XHR2
- error 请求失败时触发 XHR2
- loadstart 请求开始时触发 XHR2
- loadend 请求结束时触发无论成功都会触发 XHR2
- abort 请求中断时触发 XHR2
- timeout 请求超时时触发 XHR2
ProgressEvent属性
- loaded属性：当前下载了多少字节
- tatal属性：总的字节数
- lengthComputable 属性：长度是否可计算

上传进度使用

    xhr.onprogress = function(en){
                box.innerHTML = "下载了："+(en.loaded/en.total).toFixed(2) * 100 + "%";
            }