File API 与 Blob API

原创已于 2025-10-09 13:30:46 修改 · 861 阅读

29 ·

本内容遵循CC 4.0 BY-SA版权协议

原创文章如需转载请注明地址。

GEO检测

标签

#File API #Blob API

于 2025-09-05 14:16:46 首次发布

学习笔记专栏收录该内容

250 篇文章

订阅专栏

前言

本文主要内容来自

《JavaScript 高级程序设计》第4版

第20章：JavaScript API

部分内容

File API 与 Blob API

感觉比较有用，日常开发中可能会用到，所以特地记录一下。

20.4 File API与Blob API

Web应用程序的一个主要痛点是无法操作用户计算机上的文件。

2000年之前，处理文件的唯一方式是把<input type=”file”/>放到一个表单里。

File API与Blob API是为了让Web开发者能以安全的方式访问客户端机器上的文件。

20.4.1 File类型

File API仍然以表单中的文件输入字段为基础，增加了直接访问文件信息的能力。

HTML5在DOM上为文件输入元素增加了files集合，集合中包含一组File对象，表示被选中的文件。

File对象的只读属性
name	文件名
size	文件大小
type	文件MIME类型
lastModifiedDate	文件最后修改时间

监听change事件然后遍历files集合可以取得每个选中文件的信息。

//监听change事件然后遍历files集合可以取得每个选中文件的信息。

document.querySelector("input[type=file]").addEventListener("change", function (e) {

var files = e.target.files;

// 由于拼写错误 legnth，循环条件永远为 false，导致无法遍历选中的文件

for (var i = 0, file = files[i]; i < files.length; i++) {

var info = ["文件名: " + file.name, "文件大小: " + file.size, "最后修改时间: " + file.lastModifiedDate].join("\n");

console.log(info);

}

});

20.4.2 FileReader类型

FileReader类型表示一种异步文件读取机制。

用于从文件系统读取文件。

FileReader类型方法	说明
readAsText(file,encoding)	从文件中读取纯文本内容并保存在result属性中。第二个参数表示编码，是可选的。
readAsDataURL(file)	读取文件并将内容的数据URI保存在result属性中。
readAsBinaryString(file)	读取文件并将每个字符的二进制数据保存在result属性中。
readAsArrayButter(file)	读取文件并将文件内容以ArrayBuffer形式保存在result属性中。

这些读取方法是异步的。

每个FileReader会发布几个事件，其中3个最有用的事件是：

progress：表示还有更多数据，每50毫秒就会触发一次，包含与XHR的progress事件同样的信息（lengthComputable、loaded、total）。
error：表示发生了错误。
load：读取完成。如果error事件被触发，就不会再触发load事件。

20.4.3 FileReaderSync类型

FileReader的同步版本。

拥有与FileReader同样的方法，只在整个文件都加载到内存之后才会继续执行。

FileReaderSync类型只在工作线程中可用，因为如果读取整个文件耗时太长会影响全局。

20.4.4 Blob与部分读取

File对象提供了一个slice()方法读取部分文件而不是整个文件。

slice()方法有两个参数：

起始字节
要读取的字节数

方法返回一个Blob的实例，Blob实际上是File的超类。

blob表示二进制大对象（binary larget object），是JavaScript对不可修改二进制数据的封装类型。

Blob构造函数可以接收一个options参数，并在其中指定MIME类型。

Blob对象的属性和方法
size
type
slice()	切分数据
也可以使用FileReader从Blob中读取数据

20.4.5对象URL与Blob

对象URL有时候也称作Blob URL，是指存储在File或Blob中数据的URL。

对象URL的优势是不用把文件内容读取到JavaScript也可以使用文件。

只要在适当位置提供对象URL即可。

创建对象URL

window.URL.createObjectURL()，传入File或Blob对象，函数返回值是一个指向内存中地址的字符串。因为这个字符串是URL，所以可以在DOM中直接使用。

例如，使用对象URL在页面中显示一张图片。

//使用对象URL在页面中显示一张图片

document.querySelector("input[type=file]").addEventListener("change", function (e) {

let output = document.querySelector("#output"),

files = e.target.files,

//创建对象URL

// window.URL.createObjectURL()，传入File或Blob对象，函数返回值是一个指向内存中地址的字符串。因为这个字符串是URL，所以可以在DOM中直接使用。

url = window.URL.createObjectURL(files[0]);

//console.log(files);

if (url) {

if (/image/.test(files[0].type)) {

output.innerHTML = `<img src="${url}" alt="图片预览">`;

} else {

output.innerHTML = "选择的不是图片！";

}

} else {

output.innerHTML = "当前浏览器不支持URL！";

}

});

20.4.6读取拖放文件

组合使用HTML5拖放API和File API 可以创建读取文件信息的功能。

在页面上创建放置目标后，可以从桌面上把文件拖动并放到放置目标，这样会像拖放图片或链接一样触发drop事件。

被放置的文件可以通过事件的event.dataTransfer.files属性读到。

示例源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>木木的学习笔记</title>
    <link rel="stylesheet" href="./css/common.css" />
  </head>
  <body>
    <div class="container">
      <div class="navBox"></div>
      <div>
        <p>File API仍然以表单中的文件输入字段为基础，增加了直接访问文件信息的能力。</p>
        <p>HTML5在DOM上为文件输入元素增加了files集合，集合中包含一组File对象，表示被选中 的文件。</p>
      </div>
      <hr />
      <div>
        <p>window.URL.createObjectURL()，传入File或Blob对象，函数返回值是一个指向内存中地址的字符串。因为这个字符串是URL，所以可以在DOM中直接使用。</p>
      </div>
      <hr />
      <div>
        <p>测试</p>
        <div>
          <form action="">
            <input type="file" name="myFile" id="myFile" multiple />
            <br />
            <small>选择多个文件</small>
          </form>
        </div>
        <hr />
        <p>测试</p>
        <div id="output">显示图片</div>
      </div>
      <hr />
    </div>
    <script src="./js/nav.js"></script>
    <script>
      //加载页面导航
      var navObj = {
        title: "JavaScript高级程序设计（第4版）",
        chapter: "第20章：JavaScript API",
        section: "",
        part: "",
      };
      setNav(navObj);
    </script>
    <script>
      //监听change事件然后遍历files集合可以取得每个选中文件的信息。
      // document.querySelector("input[type=file]").addEventListener("change", function (e) {
      //   var files = e.target.files;
      //   // 由于拼写错误 legnth，循环条件永远为 false，导致无法遍历选中的文件
      //   for (var i = 0, file = files[i]; i < files.length; i++) {
      //     var info = ["文件名: " + file.name, "文件大小: " + file.size, "最后修改时间: " + file.lastModifiedDate].join("\n");
      //     console.log(info);
      //   }
      // });

      //使用对象URL在页面中显示一张图片
      document.querySelector("input[type=file]").addEventListener("change", function (e) {
        let output = document.querySelector("#output"),
          files = e.target.files,
          //创建对象URL
          // window.URL.createObjectURL()，传入File或Blob对象，函数返回值是一个指向内存中地址的字符串。因为这个字符串是URL，所以可以在DOM中直接使用。
          url = window.URL.createObjectURL(files[0]);
        //console.log(files);
        if (url) {
          if (/image/.test(files[0].type)) {
            output.innerHTML = `<img src="${url}" alt="图片预览">`;
          } else {
            output.innerHTML = "选择的不是图片！";
          }
        } else {
          output.innerHTML = "当前浏览器不支持URL！";
        }
      });
    </script>
  </body>
</html>

知识扩展：加载blob文件

详见《JavaScript 高级程序设计》第4版 24.5.2 常见 Fetch 请求模式

Fetch API也能提供Blob类型的响应，而Blob又可以兼容多种浏览器API。

一种常见的做法是明确将图片文件加载到内存，然后将其添加到html图片元素。为此，可以使用对象上暴露的blob()方法（response.blob()），该方法返回一个期约，解决为一个Blob的实例。然后将这个实例传给URL.createObjectUrl()以生成可以添加给图片元素src属性的值。

let image = document.querySelector("img");
fetch("./img/tiger.jpeg")
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  })
  .catch((error) => console.error("加载图片失败:", error));