javascript高级程序设计第三版FileApi 学习与实践1

文件操纵 File API

• File API 在表单中的文件输入字段的基础上，又添加了一些直接访问文件信息的接口。
• H5 在 DOM 元素中为文件输入元素添加了一个 files 集合。
• 在通过文件输入字段选择一或多个文件时，files 集合中将包含一组 File 对象，每个 File 对象对应一个文件。
• 每个 File 文件对象都有下列只读属性
  • name: 本地文件系统中的文件名
  • size: 文件的字节大小
  • type: 字符串，文件的 MIME 类型
  • lastModifiedDate: 字符串，文件上一次被修改的时间 （chrome 实现了）

<input id="file" type="file" multiple />
<script>
  let file = document.getElementById("file");
  file.addEventListener("change", (e) => {
    console.log(e.target.files); //
  });
</script>

FileList {0: File, length: 1} 0: File {name: "table封装组件.md", lastModified:
1650510865622, lastModifiedDate: Thu Apr 21 2022 11:14:25 GMT+0800
(中国标准时间), webkitRelativePath: "", size: 2183, …} length: 1 __proto__:
FileList

FileReader

• FileReader 类型实现的是一种异步文件读取机制
  • readAsText(file,encoding)：以纯文本形式读取文件，将读取到的文本保存在 result 属性中。第二个参数用于指定编码类型，是可选的
  • readAsDataURL(file)：读取文件并将文件以数据 URI 的形式保存在 result 属性中。
  • readAsBinaryString(file)：读取文件并将一个字符串保存在 result 属性中，字符串中的每个字符表示一字节
  • readAsArrayBuffer(file)：读取文件并将一个包含文件内容的 ArrayBuffer 保存在 result 属性中。
• FileReader 的事件
  • progress : 读取数据
  • error : 是否发生了错误
  • load : 是否已经读完了整个文件
  • 每过 50ms 左右，就会触发一次 progress 事件

<input id="file" type="file" />
<div id="output"></div>
<div id="progress"></div>
<script>
  let file = document.getElementById("file");
  let output = document.getElementById("output");
  let progress = document.getElementById("progress");
  file.addEventListener("change", (e) => {
    let type = "",
      reader = new FileReader();
    files = e.target.files;
    if (/image/.test(files[0].type)) {
      reader.readAsDataURL(files[0]);
      type = "image";
    } else {
      reader.readAsText(files[0], "utf8");
      type = "text";
    }
    reader.onerror = function () {
      output.innerHTML = "can not read file";
    };

    reader.onprogress = function (event) {
      if (event.lengthComputable) {
        progress.innerHTML = event.loaded + "/" + event.total;
      }
    };

    reader.onload = function () {
      console.log("onload");
      let html = "";
      switch (type) {
        case "image":
          html = '<img src="' + reader.result + '">';
          break;
        case "text":
          html += reader.result;
          break;
      }
      output.innerHTML = html;
    };
  });
</script>

• 效果1
  
• 效果2