拖拽API

属性

• draggable 设置为true 可以被拖拽

拖拽事件

• ondragstart 开始被拖动的时候触发 绑定给被拖动的元素
• ondrag 拖动的过程总被连续触发 绑定给被拖动的元素
• ondragend 停止拖动的时候的触发 绑定给被拖动的元素
• ondragenter 当被拖拽的元素进入到目标元素 绑定给目标元素 用于进入目标去区域时 目标区域样式改变
• ondrageover 当被拖拽的元素在目标元素内移动 绑定给目标元素 需要组织默认的动作 event.preventDefault()
• ondrageleave 当被拖拽的元素离开目标元素 绑定给目标元素
• ondrop 在目标元素内停止拖拽 绑定给目标元素

dataTransfer 对象

文件API

上传input

• 多文件上传 设置属性 multiple
• 限制上传文件的格式 属性 accept="image/jpeg" accept="text/html" image/*

FileList对象

• 是用户上传或者拖拽到浏览器的 文件的集合
• 可以通过 inputElement.files 来获取
• 是一个类数组对象 由File对象组成

File对象

• 属性 name
• 属性 size
• 属性 type
• 属性 lastModified
• 属性 lastModifiedDate

FileReader

属性

• result 读取结果
• error 错误内容
• readyState 读取状态

方法

• readAsText() 把文件读取为文本
• readyAsDataURL() 读取为base64图片编码
• readyAsArrayBuffer()
• readyAsBinaryString()
• abort() 终止读取操作

事件

• onerror 读取错误时触发
• onabort 读取中断时触发
• onloadstart 读取开始时触发
• onload 读取成功时触发
• onloadend 读取结束时 不论成功或失败
• onprogress 读取过程中多次触发

XHR2

关于

• XMLHttpRequest 简称 XHR
• XMLHttpRequest level2 简称XHR2
• XHR2在 XHR的基础上新增了 好多 属性 事件
• 新增FormData对象 XMLHttpRequestUpload对象

FormData

属性

• readyState 请求响应状态
• status HTTP状态 404/200/503/403/304
• responseText 响应内容
• timeout 超时时间 xhr2

方法

• abort()
• open()
• send()
• XHR2没有新增方法

事件

• readystatechagne
• load 请求成功完成时触发 XHR2
• progress 进度事件 下载重复触发大约50ms触发一次 XHR2
• error 请求失败时触发 XHR2
• loadstart 请求开始时触发 XHR2
• loadend 请求结束时触发 无论成功都会触发 XHR2
• abort 请求中断时触发 XHR2
• timeout 请求超时时触发 XHR2