文件API和XHR2

文件API

文件上传

• 多文件上传 ：设置属性multiple
• 过滤上传文件类型：设置accept属性，accept='image/jpg'``accept='image/*',*代表所有

FileList对象和File对象

• type为file的input元素的属性Files为FileList对象，该对象是File组成的数组
• File对象的属性
  • lastModified
  • lastModifiedData
  • name
  • size
  • type

FileReader对象

• 用来把文件读入内存，并且读取文件中的数据，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 在读取数据过程中周期性调用

XHR2(XMLHttpRequest Level 2)

• 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 属性 ：长度是否可计算

• XMLHttpRequestUpload对象
  • 提供了了各种事件来监听文件上传的进度
  • 常用progress事件，获取progressEvent

上传进度使用

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

• 事件
  • onabort上传中断时触发
  • load 上传成功时触发
  • loadend 上传结束触发，无论成功或失败
  • loadstart上传开始时触发
  • timeout 当上传因为XMLHttpRequest超时而中止触发
  • error 上传失败时触发
  • progress 上传过程重复触发（50ms一次）