js图片拖拽系列2----拖拽本地图片并显示
js图片拖拽系列1----图片来回拖拽
js图片拖拽系列3----拖拽本地图片并上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: auto;
height: 200px;
width: 200px;
overflow: hidden;
background-color: rgb(120, 138, 101)
}
img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="img" class="box" ondragover="dragOver(event)" ondrop="drop(event)"></div>
<script>
function dragStart(e) {
e.dataTransfer.setData("id", e.target.id);//将img的id写入
}
function dragOver(e) {
e.preventDefault();//阻止拖拽结束的默认行为,会把文件作为链接打开。
}
function drop(e) {
e.preventDefault();//阻止拖拽结束的默认行为,会把文件作为链接打开。
var id = e.target.id;//得到div的id
var box = document.getElementById(id);//通过id得到div
var file = e.dataTransfer.files[0];//得到文件
var fileReader = new FileReader();
fileReader.readAsDataURL(file);//将file读为url
fileReader.onload = function (ev) {
//为div添加一个图片,图片路径为拖拽的文件路径
var img = document.createElement("img");
img.src = fileReader.result;
box.appendChild(img);
}
}
</script>
</body>
</html>