最简单的html5文件拖放示例
2016-11-07 本文已影响0人
奥尼酱
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#output, #droptarget {
height: 200px;
background: lightblue;
}
</style>
</head>
<body>
<div id="droptarget"></div>
<script src="./app.js"></script>
</body>
</html>
var droptarget = document.getElementById('droptarget');
function handleEvent(event) {
event.preventDefault();
if (event.type === 'drop') {
event.preventDefault();
files = event.dataTransfer.files;
console.log(files);
}
}
droptarget.addEventListener('dragover', handleEvent);
droptarget.addEventListener('drop', handleEvent);
