Home > Article > Web Front-end > How to use JS to implement file drag and drop events

How to use JS to implement file drag and drop events

php中世界最好的语言Original: 2018-05-26 10:47:261630browse

This time I will show you how to use JS to implement file drag and drop events. What are the precautions for using JS to implement file drag and drop events. The following is a practical case, let's take a look.

1. Rendering:

2. Source code

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <style type="text/css">
    #p1 {
      width: 350px;
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function allowDrop(ev) {
      ev.preventDefault();
    }
    function drop(ev) {
      ev.preventDefault();
      console.log(ev.dataTransfer.files);
    }
  </script>
</head>
<body>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">将文件拖放到此处</p>
</body>
</html>

I believe you have mastered the method after reading the case in this article, and there will be more exciting things Please pay attention to other related articles on php Chinese website!

How to use JS to implement file drag and drop events

Related articles