File类型

在Javascript中，我们获取一个文件的信息通常是通过<input type="file">选择文件，然后监听change事件取得files上面的一个或多个file对象

const input = document.createElement('input')
input.type="file"
input.onchange=(e)=>{
  const file=e.target.files[0]
}
document.body.append(input)

每个file对象上都有一些只读属性：

name：本地系统中的文件名
size：文件的大小
type：包含MIME类型的字符串
lastModifiedDate：文件最后修改的时间字符串

MIME类型：媒体类型，用来表示文档、文件或字节流的性质和格式。通用结构”type/subtype“，由类型与子类型两个字符串中间用'/'分隔而组成。常见类型有：
text/html
image/jpeg
audio/mpeg
video/mp4
application/json  application表明是某种二进制数据

这种方式无法直接操作用户计算机上的文件，为了让开发者能够以安全的方式访问客户端上的文件，于是提出了File API

FileReader类型

File API提供了FileReader类型，FileReader是一种异步文件读取机制，类似于XMLHttpRequest，只不过FileReader是从文件系统中读取文件，而不是从服务器读取数据。FileReader类型提供了几个读取文件数据的方法：

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

这些读取方法都是异步的，所以每个FileReader对象有几个事件，其中3个最常见：

load：文件读取完成时的触发事件
error：文件读取发生错误时的触发事件。FileReader对象的error属性会包含错误信息。这个属性是一个对象，只包含一个属性code。这个错误码可能是：1（未找到）、2（安全错误）、3（读取被中断）、4（文件不可读）、5（编码错误）
progress：这个事件每隔50毫秒会触发一次，与XMLHttpRequest的progress类似，主要有3个属性：lengthComputable（布尔值，进度是否可衡量。）、loaded（已读取字节数）、total（文件总字节数）

load事件在文件读取完成时触发，如果error事件被触发则不会再触发load。下面是三个事件的例子：

const input = document.createElement('input')
input.type="file"
input.onchange=(e)=>{
  const file=e.target.files[0]
  const read=new FileReader()//创建FileReader实例
  read.readAsBinaryString(file)//读取文件
  
  read.onerror=()=>{
    console.log("error code is"+read.error.code)
  }
  
  read.onprogress=(event)=>{
    if(event.lengthComputable){
      console.log(`${event.loaded}/${event.total}`)
    }
  }
  //读取完成之后触发load事件，读取结果存储在FileReader实例的result属性上，
  //也可以通过e.target.result获取读取结果，两者等价
  read.onload=(event)=>{
    console.log(read.result)
  }
}
document.body.append(input)

如果想提前结束文件读取，可以在过程中调用abort()，从而触发abort事件。在load、error、abort事件触发后，还会触发loadend事件。

应用

选择图片并预览

const input = document.createElement('input')
input.type="file"
input.onchange=(e)=>{
  const file=e.target.files[0]
  const read=new FileReader()
  read.readAsDataURL(file)
  read.onload=()=>{
    const img=document.createElement('img')
    img.src=read.result//以readAsDataURL读取图片返回base64
    document.body.append(img)
  }
}
document.body.append(input)

读取文本内容

const input = document.createElement('input')
input.type="file"
input.onchange=(e)=>{
  const file=e.target.files[0]
  const read=new FileReader()
  read.readAsText(file)
  read.onload=()=>{
    const p=document.createElement('p')
    p.innerText=read.result
    document.body.append(p)
  }
}
document.body.append(input)

JavaScript中关于FileReader的总结

File类型

FileReader类型

应用