javascript基础学习系列四百八十八：读取拖放文件

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

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 读到文件，此时可以获取文件的相关 信息。

随着嵌入音频和视频元素在 Web 应用上的流行，大多数内容提供商会强迫使用 Flash 以便达到最佳 的跨浏览器兼容性。HTML5 新增了两个与媒体相关的元素，即和，从而为浏览器提 供了嵌入音频和视频的统一解决方案。
这两个元素既支持 Web 开发者在页面中嵌入媒体文件，也支持 JavaScript 实现对媒体的自定义控制。 以下是它们的用法:

<audio src="song.mp3" id="myAudio">Audio player not available.</audio> 18
<!-- 嵌入视频 -->
<video src="conference.mpg" id="myVideo">Video player not available.</video> <!-- 嵌入音频 -->

每个元素至少要求有一个 src 属性，以表示要加载的媒体文件。我们也可以指定表示视频播放器大 小的 width 和 height 属性，以及在视频加载期间显示图片 URI 的 poster 属性。另外，controls 属性如果存在，则表示浏览器应该显示播放界面，让用户可以直接控制媒体。开始和结束标签之间的内 容是在媒体播放器不可用时显示的替代内容。
由于浏览器支持的媒体格式不同，因此可以指定多个不同的媒体源。为此，需要从元素中删除 src 属性，使用一个或多个元素代替，如下面的例子所示:

<!-- 嵌入视频 --> <video id="myVideo">
<source src="conference.webm" type="video/webm; codecs='vp8, vorbis'"> <source src="conference.ogv" type="video/ogg; codecs='theora, vorbis'"> <source src="conference.mpg">
Video player not available.
</video>
<!-- 嵌入音频 --> <audio id="myAudio">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Audio player not available.
</audio>

讨论不同音频和视频的编解码器超出了范畴，但浏览器支持的编解码器确实可能有所不同，因 此指定多个源文件通常是必需的。