File 对象,FileList 对象,FileReader 对象

文件操作

File 对象

File对象代表一个文件,用来读写文件信息,继承了 Blob 对象

最常见的是<input type="file">标签,用户选择文件以后,浏览器会生成一个由File对象组成的数组

构造函数

浏览器原生提供File()生成File对象的实例,接受三个参数

  • array:一个数组,成员可以是二进制对象,也可以是字符串,表示文件的内容
  • name:字符串,表示文件名或者路径
  • options:配置对象,该实例的属性
    • type:字符串,表示实例对象的 MIME 类型,默认值为空字符串
    • lastMotified:上一次修改的事件,默认为Date.now()

实例属性

  • lastMotified: 最后一次修改的事件
  • type: MIME 类型
  • name: 文件名或者文件路径
  • size: 文件大小

FileList 对象

FileList对象是一个类似数组的对象,成员时File对象,实例具有length属性和item()方法

FileReader 对象

FileReader对象用户读取File对象或者Blob对象所包含的文件内容

浏览器提供一个原生的FileReader()构造函数来生成FileReader实例

var fileReader = new FileReader()

实例属性

  • FileReader.error:读取文件时产生的错误对象
  • FileReader.readyState:文件的读取状态,0表示未开始,1表示正在读取,2表示读取完成
  • FileReader.result:读取完成后的文件内容,有可能是一个字符串,有可能是一个ArrayBuffer实例
  • FileReader.onloadload事件(读取完成)监听函数,通常获取result对象获取文件内容
  • FileReader.onabortabort事件(用户终止读取)监听函数
  • FileReader.onerrorerror事件(读取发生错误)监听函数
  • FileReader.onloadstart:读取开始的监听函数
  • FileReader.onloadend:读取结束的监听函数
  • FileReader.onprogress:读取过程中的监听函数

一个读取文件的例子

// HTML 代码
// <input type="file" onchange="onChange(e)">

function onChange(e) {
  var file = e.target.files[0]

  var fileReader = new FileReader()
  fileReader.onload = function (event) {
    console.log(event.target.result)
  }
  
  fileReader.readAsText(file)
}

实例方法

  • FileReader.abort():终止读取,FileReader.readyState变为2
  • FileReader.readAsArrayBuffer():以ArrayBuffer格式读取文件,最后文件返回ArrayBuffer实例
  • FileReader.readAsBinaryString():返回原始的二进制字符串
  • FileReader.readAsDataUrl():返回一个 Base64 编码的字符串,可以直接放在<img>标签的src属性里面
  • FileReader.readAsText():返回文件内容的文本字符串,第一个参数代表文件的 Blob 实例,第二个是可选的,为编码方式,默认 UTF-8
上次更新: 8/31/2018, 3:53:49 AM