使用 FileReader进行文件读取
FileReader是什么?
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个<input>元素上选择文件后返回的 FileList对象,也可以是来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。
构造函数
FileReader() 返回一个新构造的 FileReader。
想要创建一个 FileReader 对象,很简单,如下:
let reader = new FileReader()
方法
FileReader 接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result 属性中。
方法名 | 参数 | 描述 |
---|---|---|
readAsBinaryString | file | 将文件读取为二进制编码 |
readAsText | file,[encoding] | 将文件读取为文本 |
readAsDataURL | file | 将文件读取为DataURL |
abort | (none) | 终端读取操作 |
事件处理程序
事件 | 调用时机 |
---|---|
onabort | 当读取操作被中止时调用 |
onerror | 当读取操作发生错误时调用 |
onload | 当读取操作成功完成时调用 |
onloadend |
当读取操作完成时调用,不管是成功还是失败.该处理程序在onload 或者onerror 之后调用
|
onloadstart | 当读取操作将要开始之前调用 |
onprogress | 在读取数据过程中周期性调用 |
读取文本
对于 type="file"的 input 元素,用户选择文件上传后会生成一个 FileList 对象,结构如下:
// FileList对象
{0: {lastModified: 1482289489971,lastModifiedDate: Wed Dec 21 2016 11:04:49 GMT+0800,name: "index.html",size: 1325,type: "text/html",},1: {...},length: 2
}
我们从中可以获取文件名、修改时间、大小和文件类型等信息,文件内容也是包含在里面的,不过需要 FileReader 的读取文件方法才能获取,对于纯文本,我们使用 readAsText方法,如下:
//FileReader读取文件内容
var reader = new FileReader();
reader.readAsText(files[0], 'UTF-8');
reader.onload = function (e) {// urlData就是对应的文件内容var urlData = this.result;
};
为了大家更直观的理解,我写了个 demo,配合 localStorage 实现本地文件读取与本地存储。
图片预览
FileReader 的另一个文件读取方法 readerAsDataURL,可以将图片文件转换为 base64 编码。这个方法非常有用,可以实现本地图片预览,直接上个MDN的demo,源码:
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;oFReader.onload = function (oFREvent) {document.getElementById("uploadPreview").src = oFREvent.target.result;
};function loadImageFile() {if (document.getElementById("uploadImage").files.length === 0) { return; }var oFile = document.getElementById("uploadImage").files[0];if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }oFReader.readAsDataURL(oFile);
}
</script>
</head><body onload="loadImageFile();"><form name="uploadForm"><table><tbody><tr><td><img id="uploadPreview" style="width: 100px; height: 100px;" src="" alt="Image preview" /></td><td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td></tr></tbody></table><p><input type="submit" value="Send" /></p></form>
</body>
</html>
使用 FileReader进行文件读取相关推荐
- 使用FileReader进行文件读取
FileReader是什么 FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中Fil ...
- html5的FileReader文件读取
此文引用:http://blog.csdn.net/jackfrued/article/details/8967667 一:FileReader FileReader是API重要成员用于读取文件,Fi ...
- JavaScript专精系列(6)——FileReader 文件读取
FileReader是前端进行文件处理的一个重要的Api,特别是在对图片的处理上,如果你想知道图片的处理原理,你就永远不可能绕过它. 文件处理是一系列的流程,每一步我们都需要知道,自己能做什么,自己做 ...
- Html5 FileReader 对文件进行Base64编码
以Base64进行编码的数据Url开始越来越广泛的被应用起来,原来做Base64转换要自己写一个小程序来转,其实Html5的FileReader的readAsDataURL方法读取出的数据就已经是Ba ...
- java 读取css文件_java文件读取的两种方式
JAVA中读取文件(二进制,字符)内容的几种方 JAVA中读取文件内容的方法有很多,比如按字节读取文件内容,按字符读取文件内容,按行读取文件内容,随机读取文件内容等方法,本文就以上方法的具体实现给出代 ...
- java文件读取异常_关于Java:从文本文件读取会引发异常
因此,我使用了DataInputStream,FileInputStream,BufferInputStream,FileReader,BufferedReader,Scanner,将其命名. 它们都 ...
- 四十二、深入Java中的文件读取操作
@Author:Runsen @Date:2020/6/8 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
- java压缩文件读取_用Java读取/写入压缩和非压缩文件
java压缩文件读取 这篇文章的主要原因是尝试不要重复自己( DRY ),因为通常,我会遇到递归的需求,即读写压缩的和非压缩的文件(主要是JSON和CSV). 首先让我们看看如何读取文本文件. 注意我 ...
- python open写入_Python IO操作文件读取和写入、open函数的mode参数、buffering,文件缓冲区...
IO编程 文件读写 打开文件 open(file, mode='r', buffering=None, encoding=None, errors=None, newline=None, closef ...
最新文章
- AndroidManifest 配置Activity 一直提示找不到,
- 新基建来势汹汹,开发者如何捍卫其安全?
- Oracle、SQL Server、MySQL分页方法
- 782B The Meeting Place Cannot Be Changed(二分)
- Android的Intent和IntentFilter应用说明一例
- 元宇宙iwemeta: 北交所开创,资本市场服务创新型中小企业掀开新篇章,上市企业小盘点
- Django路由分发
- vim查看cmd打印的trick
- ONGC的完整形式是什么?
- dateframe取某列数据_Python获取时序数据并进行可视化分析
- CRUD 还能这么玩?
- openssh常用命令记录
- 【语音处理】基于matlab GUI音乐多次回声图谱显示【含Matlab源码 1733期】
- 新编计算机组装与维护标准教程,计算机组装与维护标准教程(2015-2018版)
- http://blog.csdn.net/pizi0475/article/details/7768597
- 聚焦Java性能优化 打造亿级流量秒杀系统【学习笔记】01_电商秒杀商品回顾
- python 列表写入excel_Python读写excel表格的方法一
- C++实现七参数转换法(布尔莎模型)
- 我的开车心得-送给马路新人 【转】
- 机器学习典型隐私威胁