拖拽文件

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/02/03/%E6%8B%96%E6%8B%BD%E6%96%87%E4%BB%B6/

摘要

本文主要讲述了：

DataTransfer.prototype.files
DataTransfer.prototype.items

正文

DataTransfer.prototype.files

DataTransfer.prototype.files是一个类数组对象，它的元素为File对象

当drop事件发生时，开发者可以通过FileReader实例读取File对象获得文件数据

示例：

learn_drag/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script defer src="./js/index.js"></script>
  </head>
  <body>
    <div class="droppable"></div>
  </body>
</html>

learn_drag/css/index.css

.droppable {
  width: 200px;
  height: 200px;
  background-color: #00f;
}

learn_drag/js/index.js

const droppableElement = document.querySelector('.droppable');

droppableElement.addEventListener('dragenter', function (event) {
  console.log('dragenter');
});
droppableElement.addEventListener('dragover', function (event) {
  event.preventDefault();
  console.log('dragover');
});
droppableElement.addEventListener('dragleave', function (event) {
  console.log('dragleave');
});
droppableElement.addEventListener('drop', function (event) {
  event.preventDefault();
  console.log('drop');
  console.log(event.dataTransfer);
  console.log(event.dataTransfer.files);
  Array.from(event.dataTransfer.files).forEach(function (value) {
    console.log(value);
    let reader = new FileReader();
    reader.addEventListener('load', function (event) {
      console.log(event);
      if (this.readyState === FileReader.DONE) {
        console.log(this.result);
      }
    });
    reader.readAsDataURL(value);
  });
});

DataTransfer.prototype.items

DataTransfer.prototype.items是一个类数组对象，它的元素为DataTransferItem

当drop事件发生时，开发者可以通过DataTransferItem.prototype.getAsFile()获得File对象，而后通过FileReader实例读取File对象获得文件数据

示例：

learn_drag/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script defer src="./js/index.js"></script>
  </head>
  <body>
    <div class="droppable"></div>
  </body>
</html>

learn_drag/css/index.css

.droppable {
  width: 200px;
  height: 200px;
  background-color: #00f;
}

learn_drag/js/index.js

const droppableElement = document.querySelector('.droppable');

droppableElement.addEventListener('dragenter', function (event) {
  console.log('dragenter');
});
droppableElement.addEventListener('dragover', function (event) {
  event.preventDefault();
  console.log('dragover');
});
droppableElement.addEventListener('dragleave', function (event) {
  console.log('dragleave');
});
droppableElement.addEventListener('drop', function (event) {
  event.preventDefault();
  console.log('drop');
  console.log(event.dataTransfer);
  console.log(event.dataTransfer.items);
  Array.from(event.dataTransfer.items).forEach(function (value) {
    console.log(value);
    let reader = new FileReader();
    reader.addEventListener('load', function (event) {
      console.log(event);
      if (this.readyState === FileReader.DONE) {
        console.log(this.result);
      }
    });
    reader.readAsDataURL(value.getAsFile());
  });
});