HTML5 File API

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

由于 File API 还在完善中，以下内容仅供参考，因为以后可能会发生变动~

File API 是 HTML5 为我们提供的一种规范，主要定义了与本地文件交互的标准方式。

File API 实现了这些接口：Blob、File、FileList、FileReader、FileReaderSync、URL。

Blob 对象

注意，Blob 不是 JavaScript 内置对象。

网上有人说 blob 对象最先在 ECMAScript 5 中引入，但是我搜索遍整个 ES5 文档却找不到一个 blob 关键词。（逗我呢。。）

不信请查阅：Annotated ECMAScript 5.1

我觉得 Blob 最早是由 W3C 制定 File API 时起草的（File API W3C Working Draft 17 November 2009）

Lol…

下面是 W3C 上对 Blob 的解释

  • A Blob object refers to a byte sequence, and has a size attribute which is the total number of bytes in the byte sequence, and a type attribute, which is an ASCII-encoded string in lower case representing the media type of the byte sequence.

可以看出，Blob 对象只是一个存储二进制数据的容器。

生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方法切出一部分。

// 方法一
var blob = new Blob([data], { type: "text/xml" });

var oldBlob = blob;

// 方法二
var newBlob = oldBlob.slice(0, 10, "text/plain");

  • new Blob( array, options )

    • array： 是一个数组，数组内容可能包含 ArrayBuffer、ArrayBufferView、Blob、DOMString 等数据类型的数据
    • options： 可选值，它是一个对象，主要设置放入到 blob 中的数组内容的 MIME 类型，默认为空字符串

  • 2 个属性

    • size： 表示 Blob 对象中所包含数据的大小（字节）
    • type： 一个字符串，表明该 Blob 对象所包含数据的 MIME 类型，默认为空字符串

  • Blob.slice([start [, end [, contentType]]])： 返回一个新的 Blob 对象，包含了原 Blob 对象中指定范围内的数据

File 对象

A File object is a Blob object with a name attribute, which is a string; it can be created within the web application via a constructor, or is a reference to a byte sequence from a file from the underlying (OS) file system.

File 对象继承自 Blob 对象，它提供了文件的相关信息。

  • 现有属性

    • name： 当前 File 对象所引用文件的文件名
    • size： 当前 File 对象所引用文件的文件大小，单位为字节
    • type： 当前 File 对象所引用文件的文件类型（MIME 类型）
    • lastModified： 当前 File 对象所引用文件最后一次修改的时间

FileList 对象

一个 FileList 对象通常来自于一个 HTML input 元素的 files 属性，你可以通过这个对象访问到用户所选择的文件。该类型的对象还有可能来自用户的拖放操作（以后的文章再讲拖放）。

HTMLInputElement.files： 返回一个 FileList 对象

  • FileList.length： 返回 FileList 包含的 File 对象的数量
  • FileList.item(index)： 根据给定的索引值，返回 FileList 对象中对应的 File 对象
var input = document.getElementById("file");

// 下面两种方法效果一样
input.files.item(0);
input.files[0];

FileReader 对象

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容并存储到内存中，使用 File 或 Blob 对象指定要读取的文件或数据。

其中 File 对象可以是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象，也可以来自拖放操作生成的 DataTransfer 对象，还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。

  • 属性

    • readyState
      • EMPTY： 0，还没有加载任何数据
      • LOADING： 1，数据正在被加载
      • DONE： 2，已完成全部的读取请求
    • result： 返回读取到的文件内容。这个属性只在读取操作完成之后才有效
    • error： 返回错误信息

  • 事件

    • abort： 当读取操作被中止时触发
    • error： 当读取操作发生错误时触发
    • load： 当读取操作成功完成时触发
    • loadend： 当读取操作完成时调用,不管是成功还是失败.该事件在 onload 或者 onerror 之后触发
    • loadstart： 当读取操作将要开始之前触发
    • progress： 在读取数据过程中周期性触发

  • 方法

    • FileReader.abort()： 终止读取操作
    • FileReader.readAsArrayBuffer(blob)： 读取指定的 Blob 或 File 对象，当读取操作完成的时候，readyState 变成已完成（DONE），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据
    • FileReader.readAsBinaryString(blob)： 读取指定的 Blob 或 File 对象，当读取完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含所读取文件原始二进制格式
    • FileReader.readAsDataURL(blob)： 读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个 data:URL 格式的字符串（base64 编码）以表示所读取文件的内容
    • FileReader.readAsText(blob [, encoding])： 将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)

FileReaderSync 对象

FileReaderSync 接口允许以同步的方式读取 File 或 Blob 对象中的内容。

  • 该接口只在 Web Workers 里可用，因为在主线程里进行同步 I/O 操作可能会阻塞用户界面

URL 对象

  • new URL(urlString[, baseURLstring])： 返回一个新创建的 URL 对象，表示由参数定义的 URL

URL 对象实现了下面 URLUtils 接口的全部属性。

  • URLUtils 接口： The URLUtils interface defines utility methods to work with URLs（定义了一些用来处理 URLs 的实用的方法）

    • URLUtils.href： 包含完整 URL 的 DOMString
    • URLUtils.protocol： 包含 URL 协议名的 DOMString，末尾带 ‘:’
    • URLUtils.host： 包含 URL 域名，’:’，和端口号的 DOMString
    • URLUtils.hostname： 包含 URL 域名的 DOMString
    • URLUtils.port： 包含 URL 端口号的 DOMString
    • URLUtils.pathname： 以 ‘/‘ 起头紧跟着 URL 文件路径的 DOMString
    • URLUtils.search： 以 ‘?’ 起头紧跟着 URL 请求参数的 DOMString
    • URLUtils.hash： 以 ‘#’ 起头紧跟着 URL 锚点标记的 DOMString
    • URLUtils.username： 包含在域名前面指定的用户名的 DOMString
    • URLUtils.password： 包含在域名前面指定的密码的 DOMString
    • URLUtils.origin： 返回一个包含协议名、域名和端口号的 DOMString
    • URLUtils.searchParams： 返回一个用来访问当前 URL GET 请求参数的 URLSearchParams 对象

  • URL 静态方法

    • URL.createObjectURL(blob)： 返回一个 DOMString ，包含一个唯一的 blob 链接（该链接协议为 blob:，后跟唯一标识浏览器中的对象的掩码）
    • URL.revokeObjectURL(objectURL)： 释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象

实际应用

  • 使用表单上传文件，并获取文件的基本信息
    • 验证上传内容的 mimetype 与其文件扩展名是否匹配（通过检测 File.type 属性的值实现）
    • 限制上传内容的大小（通过限制 File.size 属性的值实现）
  • 读取即将上传的本地图片，并在页面上显示出来
  • 将文件分割后进行上传（防止一次将大文件读入内存造成浏览器崩溃等问题）
  • 监控文件读取进度

参考阅读