<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
margin: 100px auto;
width: 500px;
height: 300px;
border: 5px dashed #000;
}
</style>
</head>
<body>
<div class="box"></div>
<img src="" alt="">
</body>
</html>
<script>
// 如果想要拖入浏览器打开文件,必须要实现以下两个方法,并且,要阻止其默认事件
document.ondragover = function(event) {
event.preventDefault();
}
document.ondrop = function(event) {
event.preventDefault();
}
//如果想要拖到浏览器的小盒子里,那么必须把小盒子的默认事件阻止掉
var box = document.querySelector(".box");
box.ondragover = function(event) {
event.preventDefault();
}
box.ondrop = function(event) {
event.preventDefault();
//就可以来读文件
var file = event.dataTransfer.files[0];
console.log(file);
//创建一个filereader
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
alert("haha");
console.log(reader.result);
document.querySelector("img").setAttribute("src", reader.result);
}
}
</script>
更多专业前端知识,请上 【猿2048】www.mk2048.com