最简单的html5文件拖放示例

示例代码:

<!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);
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容