拖拽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
