拖拽API
属性
拖拽事件
- 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 读取过程中多次触发
拖拽外部图片案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#drag_box{
width:100px;
height:100px;
border:1px solid orange;
background:#ccc;
cursor: pointer;
}
#box{
width:100%;
height:400px;
background:#eee;
margin:10px 0px;
}
#box img{
margin:5px;
max-height: 150px;
}
.over{
border:2px dashed #ccc;
transform: scale(0.9, 0.9);
}
</style>
</head>
<body>
<h3>请把文件夹中的图片拖到下面区域</h3>
<div id="box" name="box"></div>
<script>
//获取目标元素
var box = document.querySelector("#box");
//给目标元素绑定事件
box.addEventListener("dragenter", function(){
this.classList.add('over');
}, false);
box.addEventListener("dragleave", function(){
this.classList.remove("over");
}, false);
box.addEventListener("dragover", function(e){
e.preventDefault(); //阻止默认的动作
}, false);
box.addEventListener("drop", function(e){
e.preventDefault(); //阻止浏览器默认行为
//遍历FileList
[].forEach.call(e.dataTransfer.files, function(itemFile){
//读取文件
readImage(itemFile);
})
this.classList.remove("over"); //恢复样式
},false);
/**
* 读取图片
* @param File fileObj
*/
function readImage(fileObj) {
//创建FileReader对象
var frObj = new FileReader();
//监听读取成功
frObj.onload = function(){
var img = document.createElement("img");
img.src = frObj.result;
document.querySelector("#box").appendChild(img);
}
//读取
frObj.readAsDataURL(fileObj);
}
</script>
</body>
</html>
