未加星标

使用FileReader进行文件读取

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

最近在做的一个项目,需要读取用户上传的文件并进行本地存储,学习了一下FileReader。

本文简单介绍了FileReader以及两个FileReader的使用场景:文件读取和图片预览。

DEMO: https://dumengjie.github.io/blog-demos/FileReader/

扩展阅读: 使用localStorage进行本地存储

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 在读取数据过程中周期性调用

了解了这些基本上就可以进行开发了,如果想了解更多,请阅读 FileReader 。

读取文本

对于 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 实现本地文件读取与本地存储,对于 localStorage 的使用,请查看 使用localStorage进行本地存储 。

图片预览

FileReader 的另一个文件读取方法 readAsDataURL ,可以将图片文件转换为 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>

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: lt,gt,image,FileReader,读取,文件,html,type,file,onload,调用,localStorage,input,reader,td
分页:12
转载请注明
本文标题:使用FileReader进行文件读取
本站链接:https://www.codesec.net/view/586944.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(39)