有你在真好 的个人博客
采用HTML5进行本地文件的操作
阅读:2221 添加日期:2021/3/27 23:23:48 原文链接:https://www.toutiao.com/item/6464310117486559757/

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进行本地文件的操作

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号