20.4.6读取拖放文件

组合使用 HTML5 拖放 API 与 File API 可以创建读取文件信息的有趣功能。在页面上创建放置目标 后，可以从桌面上把文件拖动并放到放置目标。这样会像拖放图片或链接一样触发 drop 事件。被放置 的文件可以通过事件的 event.dataTransfer.files 属性读到，这个属性保存着一组 File 对象，就 像文本输入字段一样。

下面的例子会把拖放到页面放置目标上的文件信息打印出来：

// 获取DOM节点
let droptarget = document.getElementById("droptarget");

function handleEvent(event) {
  let info = "",
    output = document.getElementById("output"),
    files,
    i,
    len;
  event.preventDefault();
  if (event.type == "drop") {
    // 读取文件相关信息
    files = event.dataTransfer.files;
    i = 0;
    len = files.length;
    while (i < len) {
      info += `${files[i].name} (${files[i].type}, ${files[i].size} bytes)<br>`;
      i++;
    }
    output.innerHTML = info;
  }
}

droptarget.addEventListener("dragenter", handleEvent);
droptarget.addEventListener("dragover", handleEvent);
droptarget.addEventListener("drop", handleEvent);

与后面要介绍的拖放的例子一样，必须取消 dragenter、dragover 和 drop 的默认行为。在 drop 事件处理程序中，可以通过 event.dataTransfer.files 读到文件，此时可以获取文件的相关 信息。