采用HTML5进行本地文件的操作

HTML
394
0
0
2022-05-10
标签   HTML5

HTML5的标准文件Api可以使用页面具有文件传输的能力,其定义如下四个接口:

  • BLOB - 不改变变的原始数据。一个Blob类型属性,显示数据的媒体类型,如“text /平原”。
  • File - 继承自BLOB,表示一个单独的文件
  • FileList - 文件对象集合
  • FileReader - 读物文件或者BLOB的内容

FileRead提供了三个方法用于读取文件内容

  • readAsText() -读取文件或者BLOB对象将其内容转换为可读的文本内容。
  • readAsDataURL() -取文件或者BLOB对象将其内容转换为一个Data Url,可用于图片的现实。
  • readAsArrayBuffer() - 取文件或者BLOB对象将其内容转换为ArrayBuffer

FileReader实现一部读取并且能够展示读取内容的进度,可以实现如文件上传的进度条的接口。

  • load加载事件-数据已经成功加载
  • abort终止事件-数据加载过程被终止
  • error事件-加载过程出错
  • loadend事件-加载结束

下面是一个读物文件内容的实例

  • 采用input type='filed"控件获取文件或者Blob对象
  • 创建FileReader对象,实现加载过程的控制
  • FileReader调用readAsText()方法
  • errror事件实现出错信息的展示
  • 采用HTML5进行本地文件的操作