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>

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

属性

和元素提供了稳健的 JavaScript 接口。这两个元素有很多共有属性，可以用于确
定媒体的当前状态，如下表所示。
属性 数据类型 说明
autoplay
buffered bufferedBytes bufferingRate bufferingThrottled
Boolean TimeRanges ByteRanges Integer Boolean
取得或设置 autoplay 标签 对象，表示已下载缓冲的时间范围 对象，表示已下载缓冲的字节范围 平均每秒下载的位数 表示缓冲是否被浏览器截流

controls currentLoop currentSrc currentTime defaultPlaybackRate duration
ended
loop
muted networkState
paused playbackRate
played readyState
seekable seeking src
start totalBytes videoHeight videoWidth volume
Boolean Integer String Float Float Float Boolean Boolean Boolean Integer
Boolean Float
TimeRanges Integer
TimeRanges Boolean String Float Integer Integer Integer Float
说明
取得或设置 controls 属性，用于显示或隐藏浏览器内置控件 媒体已经播放的循环次数
当前播放媒体的 URL
已经播放的秒数
取得或设置默认回放速率。默认为 1.0 秒
媒体的总秒数
表示媒体是否播放完成
取得或设置媒体是否应该在播放完再循环开始
取得或设置媒体是否静音
表示媒体当前网络连接状态。0 表示空，1 表示加载中，2 表示加载元数据， 3 表示加载了第一帧，4 表示加载完成
表示播放器是否暂停 取得或设置当前播放速率。用户可能会让媒体播放快一些或慢一些。与
defaultPlaybackRate 不同，该属性会保持不变，除非开发者修改 到目前为止已经播放的时间范围
表示媒体是否已经准备就绪。0 表示媒体不可用，1 表示可以显示当前帧， 2 表示媒体可以开始播放，3 表示媒体可以从头播到尾
可以跳转的时间范围 表示播放器是否正移动到媒体文件的新位置 媒体文件源。可以在任何时候重写 取得或设置媒体文件中的位置，以秒为单位，从该处开始播放 资源需要的字节总数(如果知道的话) 返回视频(不一定是元素)的高度。只适用于 返回视频(不一定是元素)的宽度。只适用于 取得或设置当前音量，值为 0.0 到 1.0
上述很多属性也可以在或标签上设置。