<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>从外部拖拽</title>
<style>
*{
margin: 0;
padding:0;
}
#box{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
var box = document.querySelector("#box");
box.ondragover = function (e) {
e.preventDefault();
};
//box 作为目标元素 当外部文件拖入到目标元素内并松开鼠标时 box.ondrop 将会执行
box.ondrop = function (e) {
e.preventDefault();
//鼠标松开 e.dataTransfer.files 就存储了外面拖进来的文件
//拖进来的文件
var file = e.dataTransfer.files[0];
//创建一个fileReader 对象 用来读取我们获取的file对象里的原始数据
var fileReader = new FileReader();
//以base64的url格式读取数据 以供img使用
fileReader.readAsDataURL(file);
fileReader.onload =function (e) {
//在fileReader.onload 里异步获取外部拖入的文件数据
fileReader.result;
var img = new Image();
img.src = fileReader.result;
box.appendChild(img);
}
}
</script>
</html>
网友评论