拖拽API
属性
- draggable 设置为 draggable=true 可以被拖拽
拖拽事件
- ondragstart 开始被拖动的时候触发 绑定给被拖动的元素
- ondrag 拖动的过程总被连续触发 绑定给被拖动的元素
- ondragend 停止拖动的时候的触发 绑定给被拖动的元素
- ondragenter 当被拖拽的元素进入到目标元素 绑定给目标元素 用于进入目标去区域时 目标区域样式改变
- ondrageover 当被拖拽的元素在目标元素内移动 绑定给目标元素 若想触发drop时间,必须阻止默认动作
event.preventDefault()
- ondrageleave 当被拖拽的元素离开目标元素 绑定给目标元素
- ondrop 在目标元素内停止拖拽 绑定给目标元素
dataTransfer 对象
- e.dataTransfer.setData('传输名',传输对象) 用于提交传输对象
- e.dataTransfer.getData('传输名') 用于获取传输对象
- e.dataTransfer.files 获取被drop的外部文件
文件API
上传input
- 多文件上传 设置属性 multiple
- 限制上传文件的格式 属性 `accept= " image/jpeg text/html image/* "
FileList对象
- 是用户上传或者拖拽到浏览器的 文件的集合
- 可以通过 inputElement.files 来获取
- 是一个类数组对象 由File对象组成
File对象
- 属性 name
- 属性 size
- 属性 type
- 属性 lastModified
- 属性 lastModifiedDate
FileReader
属性
- result 读取结果
- error 错误内容
- readyState 读取状态
方法
- readAsText() 把文件读取为文本
- readAsDataURL() 读取为base64图片编码
- readAsArrayBuffer()
- readAsBinaryString()
- abort() 终止读取操作
事件
- onerror 读取错误时触发
- onabort 读取中断时触发
- onloadstart 读取开始时触发
- onload 读取成功时触发
- onloadend 读取结束时 不论成功或失败
- onprogress 读取过程中多次触发
综合使用:
var box = document.querySelector("#box");
box.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
box.addEventListener("drop", function(e) {
e.preventDefault();
[].forEach.call(e.dataTransfer.files, function(itemFile) {
console.log(e.dataTransfer.files)
readImage(itemFile);
})
}, false);
function readImage(fileObj) {
var frObj = new FileReader();
frObj.onload = function() {
var img = document.createElement("img");
img.src = frObj.result;
document.querySelector("#box").appendChild(img);
}
frObj.readAsDataURL(fileObj);
}
XHR2
FormData
构造
new FormData([formElement])
方法
- append(key, value)
- delete(key)
- get(key)
- set(key,value)
- ....
在Ajax中的使用
- XHR 作为send()方法的参数 发送post请求
- jquery
- 设置data的值为 FormData对象
- 还需要设置
processData:false和contentType:false
XHR2新增属性
XHR新增的事件
- timeout 请求超时时触发
- error 请求失败时
- abort 请求中断时
- load 响应成功后
- loadstart 开始请求时
- loadend 结束响应时
- progress 请求响应过程中连续触发
ProgressEvent
- 属性 loaded 当前下载了多少字节
- 属性 total 总的字节数
- 属性 lengthComputable 长度是否可计算
XMLHttpRequestUpload 对象
作用
- 提供了各种事件来监听文件上传的进度
- 常用progress事件。 获取progressEvent
构建
事件
- error
- timeout
- load
- loadstart
- loadend
- abort
- progress
