File API FileReader与FileReaderSync

标签实现

<input type="file" id="files" />

获取被选择的文件的基础信息

属性	作用
name	被选中文件的文件名
size	文件大小（单位：字节byte）
type	文件类型（image，text等）
lastModifiedDate	当前文件最后修改完成时的事件字符串，一般指上传完成时间（Fri Jun 11 2021 21:31:50 GMT+0800 (中国标准时间)）

代码实现

let GetFiles = document.getElementById('files')

//此处监听change事件，文件内容发生改变就触发
GetFiles.addEventListener("change", (event) => {
  let files = event.terget.files
    , index = 0
    , len = files.length
  
  while(i < len) {
    console.log(
      files[i].name
      , files[i],type
      , files[i].size
      , files[i].lastModifiedDate
    )
  }
})

到这里为止，都还是些文件相关的文本信息，还不能真的拿到文件

真正的拿文件 FileReader()，异步的

文件读取后的保存方式

假设此时已经通过input type="file"标签选择了一个文件，并复制给File

属性	作用
readAsText	将File以文本格式保存在result属性中
readAsDataURL	将File以base64字符串形式保存在result属性中
readAsBinaryString	将File以二进制字符形式保存在result属性中
readAsArrayBuffer	将File以ArrayBuffer形式保存在result属性中

记住：结果都保存在result属性中

FileReader最重要的3个事件	名称
progress	读取进度，每5毫秒触发一次
error	读取发生错误，发生错误时触发
load	成功读取完成时触发

<div id="output"></div>
<div id="progress"></div>

let GetFiles = document.getElementById('files')
GetFiles.addEventListener("change", (event) => {
  //展示上传文件的div
  let output = document.getElementById('output')
      //展示上传进度的div
      , progress = document.getElementById('progress')
      //上传的若干文件
      , files = event.target.files
      //上传文件的类型
      , type = 'default'
      创建FileReader实例
      , reader = new FileReader()
	
  //判断读取文件类型，并按类型转换
  if (/image/.test(files[0].type)) {
        //转成可读的base64字符串
	reader.readAsDataURL(files[0])
	console.log(files[0].lastModifiedDate);
	type = 'image'
  } else {
        //转成文本
	reader.readAsText(files[0])
	type = 'text'
  }

  //若读取发生错误
  reader.onerror = function () {
	output.innerHTML = 'Could not read file'
  }
  
  //展示读取进程
  reader.onprogress = function (event) {
    //event.lengthComputable，进程是否可以计算长度：boolen，若不能计算长度则event.total无意义；此属性兼容性差
    if (event.lengthComputable) {
	progress.innerHTML = `${event.loaded} / ${event.total}`
    }
  }

  //读取成功后在output中展示文件
  reader.onload = function () {
    let html = ''
    switch (type) {
      case 'image':
      	 html = `<img src="${reader.result}" />`
  	 break
      case 'text':
         html = reader.result
	 break
    }
    output.innerHTML = html
  }
})

FileReaderSync同步的，可以读取指定的Blob和File对象中的内容，返回一个ArrayBuffer对象，里面包含了被读取文件的内容数据。如果在读取过程中发生了错误,则会抛出相关的异常。
但是只能在workes里用，因为在主线程里进行同步I/O操作可能会阻塞用户界面。