美文网首页
最简单的html5文件拖放示例

最简单的html5文件拖放示例

作者: 奥尼酱 | 来源:发表于2016-11-07 20:52 被阅读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);
    

    相关文章

      网友评论

          本文标题:最简单的html5文件拖放示例

          本文链接:https://www.haomeiwen.com/subject/ipnouttx.html